From 8a797365e20ae6c42c43a082b66190fdebd2f4dc Mon Sep 17 00:00:00 2001
From: Manuel Cillero <manuel@cillero.es>
Date: Thu, 23 Nov 2023 20:31:22 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20popular=20styles=20to=20butto?=
 =?UTF-8?q?ns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagetop-bootsier/src/lib.rs                   |   34 +-
 pagetop-bulmix/src/lib.rs                     |   34 +-
 pagetop-homedemo/src/lib.rs                   |    5 +-
 pagetop/src/base/component.rs                 |   33 +-
 pagetop/src/base/component/button.rs          |   49 +-
 .../src/base/component/form/action_button.rs  |   21 +-
 pagetop/static/base/css/buttons.css           | 1185 +++++++++--------
 pagetop/static/base/css/inception.css         |   10 +-
 pagetop/static/base/css/menu.css              |    6 +-
 pagetop/static/base/css/root.css              |   73 +-
 10 files changed, 799 insertions(+), 651 deletions(-)

diff --git a/pagetop-bootsier/src/lib.rs b/pagetop-bootsier/src/lib.rs
index c4c008db..8ffa4b7c 100644
--- a/pagetop-bootsier/src/lib.rs
+++ b/pagetop-bootsier/src/lib.rs
@@ -106,6 +106,32 @@ impl ThemeTrait for Bootsier {
             }
             h if Button::matches_handle(h) => {
                 if let Some(b) = component_as_mut::<Button>(component) {
+                    match b.style() {
+                        ButtonStyle::Default => {
+                            b.replace_classes(b.style().to_string(), "btn btn-primary");
+                        }
+                        ButtonStyle::Info => {
+                            b.replace_classes(b.style().to_string(), "btn btn-info");
+                        }
+                        ButtonStyle::Success => {
+                            b.replace_classes(b.style().to_string(), "btn btn-success");
+                        }
+                        ButtonStyle::Warning => {
+                            b.replace_classes(b.style().to_string(), "btn btn-warning");
+                        }
+                        ButtonStyle::Danger => {
+                            b.replace_classes(b.style().to_string(), "btn btn-danger");
+                        }
+                        ButtonStyle::Light => {
+                            b.replace_classes(b.style().to_string(), "btn btn-light");
+                        }
+                        ButtonStyle::Dark => {
+                            b.replace_classes(b.style().to_string(), "btn btn-dark");
+                        }
+                        ButtonStyle::Link => {
+                            b.replace_classes(b.style().to_string(), "btn btn-link");
+                        }
+                    };
                     match b.font_size() {
                         FontSize::ExtraLarge => {
                             b.replace_classes(b.font_size().to_string(), "fs-1");
@@ -124,14 +150,6 @@ impl ThemeTrait for Bootsier {
                         }
                         _ => {}
                     };
-                    match b.button_type() {
-                        ButtonType::Link => {
-                            b.replace_classes(b.button_type().to_string(), "btn btn-link");
-                        }
-                        ButtonType::Primary => {
-                            b.replace_classes(b.button_type().to_string(), "btn btn-primary");
-                        }
-                    };
                 }
             }
             h if Heading::matches_handle(h) => {
diff --git a/pagetop-bulmix/src/lib.rs b/pagetop-bulmix/src/lib.rs
index f4354df8..6d7c0efb 100644
--- a/pagetop-bulmix/src/lib.rs
+++ b/pagetop-bulmix/src/lib.rs
@@ -55,6 +55,32 @@ impl ThemeTrait for Bulmix {
             }
             h if Button::matches_handle(h) => {
                 if let Some(b) = component_as_mut::<Button>(component) {
+                    match b.style() {
+                        ButtonStyle::Default => {
+                            b.replace_classes(b.style().to_string(), "button is-primary");
+                        }
+                        ButtonStyle::Info => {
+                            b.replace_classes(b.style().to_string(), "button is-info");
+                        }
+                        ButtonStyle::Success => {
+                            b.replace_classes(b.style().to_string(), "button is-success");
+                        }
+                        ButtonStyle::Warning => {
+                            b.replace_classes(b.style().to_string(), "button is-warning");
+                        }
+                        ButtonStyle::Danger => {
+                            b.replace_classes(b.style().to_string(), "button is-danger");
+                        }
+                        ButtonStyle::Light => {
+                            b.replace_classes(b.style().to_string(), "button is-light");
+                        }
+                        ButtonStyle::Dark => {
+                            b.replace_classes(b.style().to_string(), "button is-dark");
+                        }
+                        ButtonStyle::Link => {
+                            b.replace_classes(b.style().to_string(), "button is-text");
+                        }
+                    };
                     match b.font_size() {
                         FontSize::ExtraLarge => {
                             b.replace_classes(b.font_size().to_string(), "is-size-1");
@@ -73,14 +99,6 @@ impl ThemeTrait for Bulmix {
                         }
                         _ => {}
                     };
-                    match b.button_type() {
-                        ButtonType::Link => {
-                            b.replace_classes(b.button_type().to_string(), "button is-text");
-                        }
-                        ButtonType::Primary => {
-                            b.replace_classes(b.button_type().to_string(), "button is-primary");
-                        }
-                    };
                 }
             }
             h if Heading::matches_handle(h) => {
diff --git a/pagetop-homedemo/src/lib.rs b/pagetop-homedemo/src/lib.rs
index d1c023e5..a54b5732 100644
--- a/pagetop-homedemo/src/lib.rs
+++ b/pagetop-homedemo/src/lib.rs
@@ -69,7 +69,7 @@ fn hello_world() -> Wrapper {
                         ),
                     ))
                     .add_component(
-                        Button::primary(
+                        Button::anchor(
                             "https://github.com/manuelcillero/pagetop",
                             L10n::t("hello_code", &LOCALES_HOMEDEMO),
                         )
@@ -79,7 +79,8 @@ fn hello_world() -> Wrapper {
                         .with_font_size(FontSize::Medium),
                     )
                     .add_component(
-                        Button::link("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
+                        Button::anchor("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
+                            .with_style(ButtonStyle::Link)
                             .with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
                             .with_classes(ClassesOp::Add, "welcome-link")
                             .with_font_size(FontSize::Medium),
diff --git a/pagetop/src/base/component.rs b/pagetop/src/base/component.rs
index 4e183b99..51d8652a 100644
--- a/pagetop/src/base/component.rs
+++ b/pagetop/src/base/component.rs
@@ -88,6 +88,37 @@ impl ToString for BreakPoint {
 
 // *************************************************************************************************
 
+#[derive(SmartDefault)]
+pub enum ButtonStyle {
+    #[default]
+    Default,
+    Info,
+    Success,
+    Warning,
+    Danger,
+    Light,
+    Dark,
+    Link,
+}
+
+#[rustfmt::skip]
+impl ToString for ButtonStyle {
+    fn to_string(&self) -> String {
+        String::from(match self {
+            ButtonStyle::Default   => "pt-button__default",
+            ButtonStyle::Info      => "pt-button__info",
+            ButtonStyle::Success   => "pt-button__success",
+            ButtonStyle::Warning   => "pt-button__warning",
+            ButtonStyle::Danger    => "pt-button__danger",
+            ButtonStyle::Light     => "pt-button__light",
+            ButtonStyle::Dark      => "pt-button__dark",
+            ButtonStyle::Link      => "pt-button__link",
+        })
+    }
+}
+
+// *************************************************************************************************
+
 #[derive(SmartDefault)]
 pub enum FontSize {
     ExtraLarge,
@@ -144,7 +175,7 @@ mod paragraph;
 pub use paragraph::Paragraph;
 
 mod button;
-pub use button::{Button, ButtonTarget, ButtonType};
+pub use button::{Button, ButtonTarget};
 
 mod image;
 pub use image::{Image, ImageSize};
diff --git a/pagetop/src/base/component/button.rs b/pagetop/src/base/component/button.rs
index c98e76ec..d9540078 100644
--- a/pagetop/src/base/component/button.rs
+++ b/pagetop/src/base/component/button.rs
@@ -1,23 +1,6 @@
 use crate::prelude::*;
 use crate::BaseHandle;
 
-#[derive(SmartDefault)]
-pub enum ButtonType {
-    #[default]
-    Link,
-    Primary,
-}
-
-#[rustfmt::skip]
-impl ToString for ButtonType {
-    fn to_string(&self) -> String {
-        String::from(match self {
-            ButtonType::Link    => "link",
-            ButtonType::Primary => "primary",
-        })
-    }
-}
-
 #[derive(SmartDefault)]
 pub enum ButtonTarget {
     #[default]
@@ -35,7 +18,7 @@ pub struct Button {
     weight     : Weight,
     renderable : Renderable,
     classes    : OptionClasses,
-    button_type: ButtonType,
+    style      : ButtonStyle,
     font_size  : FontSize,
     left_icon  : OptionComponent<Icon>,
     right_icon : OptionComponent<Icon>,
@@ -62,13 +45,7 @@ impl ComponentTrait for Button {
     }
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.prepend_classes(
-            [
-                concat_string!("pt-button__", self.button_type().to_string()),
-                self.font_size().to_string(),
-            ]
-            .join(" "),
-        );
+        self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
     }
 
     #[rustfmt::skip]
@@ -96,18 +73,8 @@ impl ComponentTrait for Button {
 }
 
 impl Button {
-    pub fn link(href: impl Into<String>, html: L10n) -> Self {
-        Button::default()
-            .with_type(ButtonType::Link)
-            .with_href(href)
-            .with_html(html)
-    }
-
-    pub fn primary(href: impl Into<String>, html: L10n) -> Self {
-        Button::default()
-            .with_type(ButtonType::Primary)
-            .with_href(href)
-            .with_html(html)
+    pub fn anchor(href: impl Into<String>, html: L10n) -> Self {
+        Button::default().with_href(href).with_html(html)
     }
 
     // Button BUILDER.
@@ -131,8 +98,8 @@ impl Button {
     }
 
     #[fn_builder]
-    pub fn alter_type(&mut self, button_type: ButtonType) -> &mut Self {
-        self.button_type = button_type;
+    pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
+        self.style = style;
         self
     }
 
@@ -174,8 +141,8 @@ impl Button {
 
     // Button GETTERS.
 
-    pub fn button_type(&self) -> &ButtonType {
-        &self.button_type
+    pub fn style(&self) -> &ButtonStyle {
+        &self.style
     }
 
     pub fn font_size(&self) -> &FontSize {
diff --git a/pagetop/src/base/component/form/action_button.rs b/pagetop/src/base/component/form/action_button.rs
index f5fc0ee5..be7c72c9 100644
--- a/pagetop/src/base/component/form/action_button.rs
+++ b/pagetop/src/base/component/form/action_button.rs
@@ -25,6 +25,7 @@ pub struct ActionButton {
     renderable : Renderable,
     classes    : OptionClasses,
     button_type: ActionButtonType,
+    style      : ButtonStyle,
     font_size  : FontSize,
     left_icon  : OptionComponent<Icon>,
     right_icon : OptionComponent<Icon>,
@@ -48,13 +49,7 @@ impl ComponentTrait for ActionButton {
     }
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.prepend_classes(
-            [
-                concat_string!("pt-button__", self.button_type().to_string()),
-                self.font_size().to_string(),
-            ]
-            .join(" "),
-        );
+        self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@@ -81,6 +76,7 @@ impl ActionButton {
     pub fn submit() -> Self {
         ActionButton {
             button_type: ActionButtonType::Submit,
+            style: ButtonStyle::Default,
             value: OptionTranslated::new(L10n::l("button_submit")),
             ..Default::default()
         }
@@ -89,6 +85,7 @@ impl ActionButton {
     pub fn reset() -> Self {
         ActionButton {
             button_type: ActionButtonType::Reset,
+            style: ButtonStyle::Info,
             value: OptionTranslated::new(L10n::l("button_reset")),
             ..Default::default()
         }
@@ -108,6 +105,12 @@ impl ActionButton {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
+        self.style = style;
+        self
+    }
+
     #[fn_builder]
     pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
         self.font_size = font_size;
@@ -162,6 +165,10 @@ impl ActionButton {
         &self.button_type
     }
 
+    pub fn style(&self) -> &ButtonStyle {
+        &self.style
+    }
+
     pub fn font_size(&self) -> &FontSize {
         &self.font_size
     }
diff --git a/pagetop/static/base/css/buttons.css b/pagetop/static/base/css/buttons.css
index 3c644bd9..14ac801a 100644
--- a/pagetop/static/base/css/buttons.css
+++ b/pagetop/static/base/css/buttons.css
@@ -2,7 +2,7 @@
 	cursor: pointer;
 	text-align: center;
 	display: inline-block;
-    color: var(--pt-color--white);
+	color: var(--pt-color--white);
 	background-color: transparent;
 	text-decoration: none;
 	border: 1px solid transparent;
@@ -16,1199 +16,1274 @@
 	margin: 0 var(--pt-gap-0-15);
 }
 
+.pt-button__default {
+	background-color: var(--pt-color--default);
+}
+.pt-button__default:hover {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--default-dark);
+}
+.pt-button__default:active,
+.pt-button__default:disabled {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--default-light);
+}
+
+.pt-button__info {
+	background-color: var(--pt-color--info);
+}
+.pt-button__info:hover {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--info-dark);
+}
+.pt-button__info:active,
+.pt-button__info:disabled {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--info-light);
+}
+
+.pt-button__success {
+	background-color: var(--pt-color--success);
+}
+.pt-button__success:hover {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--success-dark);
+}
+.pt-button__success:active,
+.pt-button__success:disabled {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--success-light);
+}
+
+.pt-button__warning {
+	background-color: var(--pt-color--warning);
+}
+.pt-button__warning:hover {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--warning-dark);
+}
+.pt-button__warning:active,
+.pt-button__warning:disabled {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--warning-light);
+}
+
+.pt-button__danger {
+	background-color: var(--pt-color--danger);
+}
+.pt-button__danger:hover {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--danger-dark);
+}
+.pt-button__danger:active,
+.pt-button__danger:disabled {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--danger-light);
+}
+
+.pt-button__light {
+	color: var(--pt-color--text);
+	background-color: var(--pt-color--light);
+}
+.pt-button__light:hover {
+	color: var(--pt-color--text);
+	background-color: var(--pt-color--light-dark);
+}
+.pt-button__light:active,
+.pt-button__light:disabled {
+	color: var(--pt-color--text);
+	background-color: var(--pt-color--light-light);
+}
+
+.pt-button__dark {
+	background-color: var(--pt-color--dark);
+}
+.pt-button__dark:hover {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--dark-dark);
+}
+.pt-button__dark:active,
+.pt-button__dark:disabled {
+	color: var(--pt-color--white);
+	background-color: var(--pt-color--dark-light);
+}
+
 .pt-button__link {
-	color: var(--pt-color--primary);
+	color: var(--pt-color--default);
 }
 
-.pt-button__submit,
-.pt-button__primary {
-    background-color: var(--pt-color--primary);
-}
-.pt-button__submit:hover,
-.pt-button__primary:hover {
-	color: var(--pt-color--white);
-    background-color: var(--pt-color--primary-dark);
-}
-.pt-button__submit:active,
-.pt-button__primary:active {
-	color: var(--pt-color--white);
-    background-color: var(--pt-color--primary-light);
-}
-
-
-
 /*
 .button strong {
-    color: inherit
+	color: inherit
 }
 
 .button .icon,.button .icon.is-large,.button .icon.is-medium,.button .icon.is-small {
-    height: 1.5em;
-    width: 1.5em
+	height: 1.5em;
+	width: 1.5em
 }
 
 .button .icon:first-child:not(:last-child) {
-    margin-left: calc(-.5em - 1px);
-    margin-right: .25em
+	margin-left: calc(-.5em - 1px);
+	margin-right: .25em
 }
 
 .button .icon:last-child:not(:first-child) {
-    margin-left: .25em;
-    margin-right: calc(-.5em - 1px)
+	margin-left: .25em;
+	margin-right: calc(-.5em - 1px)
 }
 
 .button .icon:first-child:last-child {
-    margin-left: calc(-.5em - 1px);
-    margin-right: calc(-.5em - 1px)
+	margin-left: calc(-.5em - 1px);
+	margin-right: calc(-.5em - 1px)
 }
 
 .button.is-hovered,.button:hover {
-    border-color: #b5b5b5;
-    color: #363636
+	border-color: #b5b5b5;
+	color: #363636
 }
 
 .button.is-focused,.button:focus {
-    border-color: #485fc7;
-    color: #363636
+	border-color: #485fc7;
+	color: #363636
 }
 
 .button.is-focused:not(:active),.button:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(72,95,199,.25)
+	box-shadow: 0 0 0 .125em rgba(72,95,199,.25)
 }
 
 .button.is-active,.button:active {
-    border-color: #4a4a4a;
-    color: #363636
+	border-color: #4a4a4a;
+	color: #363636
 }
 
 .button.is-text {
-    background-color: transparent;
-    border-color: transparent;
-    color: #4a4a4a;
-    text-decoration: underline
+	background-color: transparent;
+	border-color: transparent;
+	color: #4a4a4a;
+	text-decoration: underline
 }
 
 .button.is-text.is-focused,.button.is-text.is-hovered,.button.is-text:focus,.button.is-text:hover {
-    background-color: #f5f5f5;
-    color: #363636
+	background-color: #f5f5f5;
+	color: #363636
 }
 
 .button.is-text.is-active,.button.is-text:active {
-    background-color: #e8e8e8;
-    color: #363636
+	background-color: #e8e8e8;
+	color: #363636
 }
 
 .button.is-text[disabled],fieldset[disabled] .button.is-text {
-    background-color: transparent;
-    border-color: transparent;
-    box-shadow: none
+	background-color: transparent;
+	border-color: transparent;
+	box-shadow: none
 }
 
 .button.is-ghost {
-    background: 0 0;
-    border-color: transparent;
-    color: #485fc7;
-    text-decoration: none
+	background: 0 0;
+	border-color: transparent;
+	color: #485fc7;
+	text-decoration: none
 }
 
 .button.is-ghost.is-hovered,.button.is-ghost:hover {
-    color: #485fc7;
-    text-decoration: underline
+	color: #485fc7;
+	text-decoration: underline
 }
 
 .button.is-white {
-    background-color: #fff;
-    border-color: transparent;
-    color: #0a0a0a
+	background-color: #fff;
+	border-color: transparent;
+	color: #0a0a0a
 }
 
 .button.is-white.is-hovered,.button.is-white:hover {
-    background-color: #f9f9f9;
-    border-color: transparent;
-    color: #0a0a0a
+	background-color: #f9f9f9;
+	border-color: transparent;
+	color: #0a0a0a
 }
 
 .button.is-white.is-focused,.button.is-white:focus {
-    border-color: transparent;
-    color: #0a0a0a
+	border-color: transparent;
+	color: #0a0a0a
 }
 
 .button.is-white.is-focused:not(:active),.button.is-white:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(255,255,255,.25)
+	box-shadow: 0 0 0 .125em rgba(255,255,255,.25)
 }
 
 .button.is-white.is-active,.button.is-white:active {
-    background-color: #f2f2f2;
-    border-color: transparent;
-    color: #0a0a0a
+	background-color: #f2f2f2;
+	border-color: transparent;
+	color: #0a0a0a
 }
 
 .button.is-white[disabled],fieldset[disabled] .button.is-white {
-    background-color: #fff;
-    border-color: #fff;
-    box-shadow: none
+	background-color: #fff;
+	border-color: #fff;
+	box-shadow: none
 }
 
 .button.is-white.is-inverted {
-    background-color: #0a0a0a;
-    color: #fff
+	background-color: #0a0a0a;
+	color: #fff
 }
 
 .button.is-white.is-inverted.is-hovered,.button.is-white.is-inverted:hover {
-    background-color: #000
+	background-color: #000
 }
 
 .button.is-white.is-inverted[disabled],fieldset[disabled] .button.is-white.is-inverted {
-    background-color: #0a0a0a;
-    border-color: transparent;
-    box-shadow: none;
-    color: #fff
+	background-color: #0a0a0a;
+	border-color: transparent;
+	box-shadow: none;
+	color: #fff
 }
 
 .button.is-white.is-loading::after {
-    border-color: transparent transparent #0a0a0a #0a0a0a!important
+	border-color: transparent transparent #0a0a0a #0a0a0a!important
 }
 
 .button.is-white.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
 .button.is-white.is-outlined.is-focused,.button.is-white.is-outlined.is-hovered,.button.is-white.is-outlined:focus,.button.is-white.is-outlined:hover {
-    background-color: #fff;
-    border-color: #fff;
-    color: #0a0a0a
+	background-color: #fff;
+	border-color: #fff;
+	color: #0a0a0a
 }
 
 .button.is-white.is-outlined.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-white.is-outlined.is-loading.is-focused::after,.button.is-white.is-outlined.is-loading.is-hovered::after,.button.is-white.is-outlined.is-loading:focus::after,.button.is-white.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #0a0a0a #0a0a0a!important
+	border-color: transparent transparent #0a0a0a #0a0a0a!important
 }
 
 .button.is-white.is-outlined[disabled],fieldset[disabled] .button.is-white.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 
 .button.is-white.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #0a0a0a;
-    color: #0a0a0a
+	background-color: transparent;
+	border-color: #0a0a0a;
+	color: #0a0a0a
 }
 
 .button.is-white.is-inverted.is-outlined.is-focused,.button.is-white.is-inverted.is-outlined.is-hovered,.button.is-white.is-inverted.is-outlined:focus,.button.is-white.is-inverted.is-outlined:hover {
-    background-color: #0a0a0a;
-    color: #fff
+	background-color: #0a0a0a;
+	color: #fff
 }
 
 .button.is-white.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-white.is-inverted.is-outlined.is-loading:focus::after,.button.is-white.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-white.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-white.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #0a0a0a;
-    box-shadow: none;
-    color: #0a0a0a
+	background-color: transparent;
+	border-color: #0a0a0a;
+	box-shadow: none;
+	color: #0a0a0a
 }
 
 .button.is-black {
-    background-color: #0a0a0a;
-    border-color: transparent;
-    color: #fff
+	background-color: #0a0a0a;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-black.is-hovered,.button.is-black:hover {
-    background-color: #040404;
-    border-color: transparent;
-    color: #fff
+	background-color: #040404;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-black.is-focused,.button.is-black:focus {
-    border-color: transparent;
-    color: #fff
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-black.is-focused:not(:active),.button.is-black:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(10,10,10,.25)
+	box-shadow: 0 0 0 .125em rgba(10,10,10,.25)
 }
 
 .button.is-black.is-active,.button.is-black:active {
-    background-color: #000;
-    border-color: transparent;
-    color: #fff
+	background-color: #000;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-black[disabled],fieldset[disabled] .button.is-black {
-    background-color: #0a0a0a;
-    border-color: #0a0a0a;
-    box-shadow: none
+	background-color: #0a0a0a;
+	border-color: #0a0a0a;
+	box-shadow: none
 }
 
 .button.is-black.is-inverted {
-    background-color: #fff;
-    color: #0a0a0a
+	background-color: #fff;
+	color: #0a0a0a
 }
 
 .button.is-black.is-inverted.is-hovered,.button.is-black.is-inverted:hover {
-    background-color: #f2f2f2
+	background-color: #f2f2f2
 }
 
 .button.is-black.is-inverted[disabled],fieldset[disabled] .button.is-black.is-inverted {
-    background-color: #fff;
-    border-color: transparent;
-    box-shadow: none;
-    color: #0a0a0a
+	background-color: #fff;
+	border-color: transparent;
+	box-shadow: none;
+	color: #0a0a0a
 }
 
 .button.is-black.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-black.is-outlined {
-    background-color: transparent;
-    border-color: #0a0a0a;
-    color: #0a0a0a
+	background-color: transparent;
+	border-color: #0a0a0a;
+	color: #0a0a0a
 }
 
 .button.is-black.is-outlined.is-focused,.button.is-black.is-outlined.is-hovered,.button.is-black.is-outlined:focus,.button.is-black.is-outlined:hover {
-    background-color: #0a0a0a;
-    border-color: #0a0a0a;
-    color: #fff
+	background-color: #0a0a0a;
+	border-color: #0a0a0a;
+	color: #fff
 }
 
 .button.is-black.is-outlined.is-loading::after {
-    border-color: transparent transparent #0a0a0a #0a0a0a!important
+	border-color: transparent transparent #0a0a0a #0a0a0a!important
 }
 
 .button.is-black.is-outlined.is-loading.is-focused::after,.button.is-black.is-outlined.is-loading.is-hovered::after,.button.is-black.is-outlined.is-loading:focus::after,.button.is-black.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-black.is-outlined[disabled],fieldset[disabled] .button.is-black.is-outlined {
-    background-color: transparent;
-    border-color: #0a0a0a;
-    box-shadow: none;
-    color: #0a0a0a
+	background-color: transparent;
+	border-color: #0a0a0a;
+	box-shadow: none;
+	color: #0a0a0a
 }
 
 .button.is-black.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
 .button.is-black.is-inverted.is-outlined.is-focused,.button.is-black.is-inverted.is-outlined.is-hovered,.button.is-black.is-inverted.is-outlined:focus,.button.is-black.is-inverted.is-outlined:hover {
-    background-color: #fff;
-    color: #0a0a0a
+	background-color: #fff;
+	color: #0a0a0a
 }
 
 .button.is-black.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-black.is-inverted.is-outlined.is-loading:focus::after,.button.is-black.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #0a0a0a #0a0a0a!important
+	border-color: transparent transparent #0a0a0a #0a0a0a!important
 }
 
 .button.is-black.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-black.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 
 .button.is-light {
-    background-color: #f5f5f5;
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	background-color: #f5f5f5;
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-light.is-hovered,.button.is-light:hover {
-    background-color: #eee;
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	background-color: #eee;
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-light.is-focused,.button.is-light:focus {
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-light.is-focused:not(:active),.button.is-light:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(245,245,245,.25)
+	box-shadow: 0 0 0 .125em rgba(245,245,245,.25)
 }
 
 .button.is-light.is-active,.button.is-light:active {
-    background-color: #e8e8e8;
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	background-color: #e8e8e8;
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-light[disabled],fieldset[disabled] .button.is-light {
-    background-color: #f5f5f5;
-    border-color: #f5f5f5;
-    box-shadow: none
+	background-color: #f5f5f5;
+	border-color: #f5f5f5;
+	box-shadow: none
 }
 
 .button.is-light.is-inverted {
-    background-color: rgba(0,0,0,.7);
-    color: #f5f5f5
+	background-color: rgba(0,0,0,.7);
+	color: #f5f5f5
 }
 
 .button.is-light.is-inverted.is-hovered,.button.is-light.is-inverted:hover {
-    background-color: rgba(0,0,0,.7)
+	background-color: rgba(0,0,0,.7)
 }
 
 .button.is-light.is-inverted[disabled],fieldset[disabled] .button.is-light.is-inverted {
-    background-color: rgba(0,0,0,.7);
-    border-color: transparent;
-    box-shadow: none;
-    color: #f5f5f5
+	background-color: rgba(0,0,0,.7);
+	border-color: transparent;
+	box-shadow: none;
+	color: #f5f5f5
 }
 
 .button.is-light.is-loading::after {
-    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+	border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
 }
 
 .button.is-light.is-outlined {
-    background-color: transparent;
-    border-color: #f5f5f5;
-    color: #f5f5f5
+	background-color: transparent;
+	border-color: #f5f5f5;
+	color: #f5f5f5
 }
 
 .button.is-light.is-outlined.is-focused,.button.is-light.is-outlined.is-hovered,.button.is-light.is-outlined:focus,.button.is-light.is-outlined:hover {
-    background-color: #f5f5f5;
-    border-color: #f5f5f5;
-    color: rgba(0,0,0,.7)
+	background-color: #f5f5f5;
+	border-color: #f5f5f5;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-light.is-outlined.is-loading::after {
-    border-color: transparent transparent #f5f5f5 #f5f5f5!important
+	border-color: transparent transparent #f5f5f5 #f5f5f5!important
 }
 
 .button.is-light.is-outlined.is-loading.is-focused::after,.button.is-light.is-outlined.is-loading.is-hovered::after,.button.is-light.is-outlined.is-loading:focus::after,.button.is-light.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+	border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
 }
 
 .button.is-light.is-outlined[disabled],fieldset[disabled] .button.is-light.is-outlined {
-    background-color: transparent;
-    border-color: #f5f5f5;
-    box-shadow: none;
-    color: #f5f5f5
+	background-color: transparent;
+	border-color: #f5f5f5;
+	box-shadow: none;
+	color: #f5f5f5
 }
 
 .button.is-light.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: rgba(0,0,0,.7);
-    color: rgba(0,0,0,.7)
+	background-color: transparent;
+	border-color: rgba(0,0,0,.7);
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-light.is-inverted.is-outlined.is-focused,.button.is-light.is-inverted.is-outlined.is-hovered,.button.is-light.is-inverted.is-outlined:focus,.button.is-light.is-inverted.is-outlined:hover {
-    background-color: rgba(0,0,0,.7);
-    color: #f5f5f5
+	background-color: rgba(0,0,0,.7);
+	color: #f5f5f5
 }
 
 .button.is-light.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-light.is-inverted.is-outlined.is-loading:focus::after,.button.is-light.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #f5f5f5 #f5f5f5!important
+	border-color: transparent transparent #f5f5f5 #f5f5f5!important
 }
 
 .button.is-light.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-light.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: rgba(0,0,0,.7);
-    box-shadow: none;
-    color: rgba(0,0,0,.7)
+	background-color: transparent;
+	border-color: rgba(0,0,0,.7);
+	box-shadow: none;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-dark {
-    background-color: #363636;
-    border-color: transparent;
-    color: #fff
+	background-color: #363636;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-dark.is-hovered,.button.is-dark:hover {
-    background-color: #2f2f2f;
-    border-color: transparent;
-    color: #fff
+	background-color: #2f2f2f;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-dark.is-focused,.button.is-dark:focus {
-    border-color: transparent;
-    color: #fff
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-dark.is-focused:not(:active),.button.is-dark:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(54,54,54,.25)
+	box-shadow: 0 0 0 .125em rgba(54,54,54,.25)
 }
 
 .button.is-dark.is-active,.button.is-dark:active {
-    background-color: #292929;
-    border-color: transparent;
-    color: #fff
+	background-color: #292929;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-dark[disabled],fieldset[disabled] .button.is-dark {
-    background-color: #363636;
-    border-color: #363636;
-    box-shadow: none
+	background-color: #363636;
+	border-color: #363636;
+	box-shadow: none
 }
 
 .button.is-dark.is-inverted {
-    background-color: #fff;
-    color: #363636
+	background-color: #fff;
+	color: #363636
 }
 
 .button.is-dark.is-inverted.is-hovered,.button.is-dark.is-inverted:hover {
-    background-color: #f2f2f2
+	background-color: #f2f2f2
 }
 
 .button.is-dark.is-inverted[disabled],fieldset[disabled] .button.is-dark.is-inverted {
-    background-color: #fff;
-    border-color: transparent;
-    box-shadow: none;
-    color: #363636
+	background-color: #fff;
+	border-color: transparent;
+	box-shadow: none;
+	color: #363636
 }
 
 .button.is-dark.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-dark.is-outlined {
-    background-color: transparent;
-    border-color: #363636;
-    color: #363636
+	background-color: transparent;
+	border-color: #363636;
+	color: #363636
 }
 
 .button.is-dark.is-outlined.is-focused,.button.is-dark.is-outlined.is-hovered,.button.is-dark.is-outlined:focus,.button.is-dark.is-outlined:hover {
-    background-color: #363636;
-    border-color: #363636;
-    color: #fff
+	background-color: #363636;
+	border-color: #363636;
+	color: #fff
 }
 
 .button.is-dark.is-outlined.is-loading::after {
-    border-color: transparent transparent #363636 #363636!important
+	border-color: transparent transparent #363636 #363636!important
 }
 
 .button.is-dark.is-outlined.is-loading.is-focused::after,.button.is-dark.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-outlined.is-loading:focus::after,.button.is-dark.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-dark.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-outlined {
-    background-color: transparent;
-    border-color: #363636;
-    box-shadow: none;
-    color: #363636
+	background-color: transparent;
+	border-color: #363636;
+	box-shadow: none;
+	color: #363636
 }
 
 .button.is-dark.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
 .button.is-dark.is-inverted.is-outlined.is-focused,.button.is-dark.is-inverted.is-outlined.is-hovered,.button.is-dark.is-inverted.is-outlined:focus,.button.is-dark.is-inverted.is-outlined:hover {
-    background-color: #fff;
-    color: #363636
+	background-color: #fff;
+	color: #363636
 }
 
 .button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-inverted.is-outlined.is-loading:focus::after,.button.is-dark.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #363636 #363636!important
+	border-color: transparent transparent #363636 #363636!important
 }
 
 .button.is-dark.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 */
 /*
-.pt-button__primary[disabled],fieldset[disabled] .pt-button__primary {
-    background-color: #00d1b2;
-    border-color: #00d1b2;
-    box-shadow: none
+.pt-button__default[disabled],fieldset[disabled] .pt-button__default {
+	background-color: #00d1b2;
+	border-color: #00d1b2;
+	box-shadow: none
 }
 
-.pt-button__primary.is-inverted {
-    background-color: #fff;
-    color: #00d1b2
+.pt-button__default.is-inverted {
+	background-color: #fff;
+	color: #00d1b2
 }
 
-.pt-button__primary.is-inverted.is-hovered,.pt-button__primary.is-inverted:hover {
-    background-color: #f2f2f2
+.pt-button__default.is-inverted.is-hovered,.pt-button__default.is-inverted:hover {
+	background-color: #f2f2f2
 }
 
-.pt-button__primary.is-inverted[disabled],fieldset[disabled] .pt-button__primary.is-inverted {
-    background-color: #fff;
-    border-color: transparent;
-    box-shadow: none;
-    color: #00d1b2
+.pt-button__default.is-inverted[disabled],fieldset[disabled] .pt-button__default.is-inverted {
+	background-color: #fff;
+	border-color: transparent;
+	box-shadow: none;
+	color: #00d1b2
 }
 
-.pt-button__primary.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+.pt-button__default.is-loading::after {
+	border-color: transparent transparent #fff #fff!important
 }
 
-.pt-button__primary.is-outlined {
-    background-color: transparent;
-    border-color: #00d1b2;
-    color: #00d1b2
+.pt-button__default.is-outlined {
+	background-color: transparent;
+	border-color: #00d1b2;
+	color: #00d1b2
 }
 
-.pt-button__primary.is-outlined.is-focused,.pt-button__primary.is-outlined.is-hovered,.pt-button__primary.is-outlined:focus,.pt-button__primary.is-outlined:hover {
-    background-color: #00d1b2;
-    border-color: #00d1b2;
-    color: #fff
+.pt-button__default.is-outlined.is-focused,.pt-button__default.is-outlined.is-hovered,.pt-button__default.is-outlined:focus,.pt-button__default.is-outlined:hover {
+	background-color: #00d1b2;
+	border-color: #00d1b2;
+	color: #fff
 }
 
-.pt-button__primary.is-outlined.is-loading::after {
-    border-color: transparent transparent #00d1b2 #00d1b2!important
+.pt-button__default.is-outlined.is-loading::after {
+	border-color: transparent transparent #00d1b2 #00d1b2!important
 }
 
-.pt-button__primary.is-outlined.is-loading.is-focused::after,.pt-button__primary.is-outlined.is-loading.is-hovered::after,.pt-button__primary.is-outlined.is-loading:focus::after,.pt-button__primary.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+.pt-button__default.is-outlined.is-loading.is-focused::after,.pt-button__default.is-outlined.is-loading.is-hovered::after,.pt-button__default.is-outlined.is-loading:focus::after,.pt-button__default.is-outlined.is-loading:hover::after {
+	border-color: transparent transparent #fff #fff!important
 }
 
-.pt-button__primary.is-outlined[disabled],fieldset[disabled] .pt-button__primary.is-outlined {
-    background-color: transparent;
-    border-color: #00d1b2;
-    box-shadow: none;
-    color: #00d1b2
+.pt-button__default.is-outlined[disabled],fieldset[disabled] .pt-button__default.is-outlined {
+	background-color: transparent;
+	border-color: #00d1b2;
+	box-shadow: none;
+	color: #00d1b2
 }
 
-.pt-button__primary.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+.pt-button__default.is-inverted.is-outlined {
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
-.pt-button__primary.is-inverted.is-outlined.is-focused,.pt-button__primary.is-inverted.is-outlined.is-hovered,.pt-button__primary.is-inverted.is-outlined:focus,.pt-button__primary.is-inverted.is-outlined:hover {
-    background-color: #fff;
-    color: #00d1b2
+.pt-button__default.is-inverted.is-outlined.is-focused,.pt-button__default.is-inverted.is-outlined.is-hovered,.pt-button__default.is-inverted.is-outlined:focus,.pt-button__default.is-inverted.is-outlined:hover {
+	background-color: #fff;
+	color: #00d1b2
 }
 
-.pt-button__primary.is-inverted.is-outlined.is-loading.is-focused::after,.pt-button__primary.is-inverted.is-outlined.is-loading.is-hovered::after,.pt-button__primary.is-inverted.is-outlined.is-loading:focus::after,.pt-button__primary.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #00d1b2 #00d1b2!important
+.pt-button__default.is-inverted.is-outlined.is-loading.is-focused::after,.pt-button__default.is-inverted.is-outlined.is-loading.is-hovered::after,.pt-button__default.is-inverted.is-outlined.is-loading:focus::after,.pt-button__default.is-inverted.is-outlined.is-loading:hover::after {
+	border-color: transparent transparent #00d1b2 #00d1b2!important
 }
 
-.pt-button__primary.is-inverted.is-outlined[disabled],fieldset[disabled] .pt-button__primary.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+.pt-button__default.is-inverted.is-outlined[disabled],fieldset[disabled] .pt-button__default.is-inverted.is-outlined {
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 
-.pt-button__primary.is-light {
-    background-color: #ebfffc;
-    color: #00947e
+.pt-button__default.is-light {
+	background-color: #ebfffc;
+	color: #00947e
 }
 
-.pt-button__primary.is-light.is-hovered,.pt-button__primary.is-light:hover {
-    background-color: #defffa;
-    border-color: transparent;
-    color: #00947e
+.pt-button__default.is-light.is-hovered,.pt-button__default.is-light:hover {
+	background-color: #defffa;
+	border-color: transparent;
+	color: #00947e
 }
 
-.pt-button__primary.is-light.is-active,.pt-button__primary.is-light:active {
-    background-color: #d1fff8;
-    border-color: transparent;
-    color: #00947e
+.pt-button__default.is-light.is-active,.pt-button__default.is-light:active {
+	background-color: #d1fff8;
+	border-color: transparent;
+	color: #00947e
 }
 
 .button.is-link {
-    background-color: #485fc7;
-    border-color: transparent;
-    color: #fff
+	background-color: #485fc7;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-link.is-hovered,.button.is-link:hover {
-    background-color: #3e56c4;
-    border-color: transparent;
-    color: #fff
+	background-color: #3e56c4;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-link.is-focused,.button.is-link:focus {
-    border-color: transparent;
-    color: #fff
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-link.is-focused:not(:active),.button.is-link:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(72,95,199,.25)
+	box-shadow: 0 0 0 .125em rgba(72,95,199,.25)
 }
 
 .button.is-link.is-active,.button.is-link:active {
-    background-color: #3a51bb;
-    border-color: transparent;
-    color: #fff
+	background-color: #3a51bb;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-link[disabled],fieldset[disabled] .button.is-link {
-    background-color: #485fc7;
-    border-color: #485fc7;
-    box-shadow: none
+	background-color: #485fc7;
+	border-color: #485fc7;
+	box-shadow: none
 }
 
 .button.is-link.is-inverted {
-    background-color: #fff;
-    color: #485fc7
+	background-color: #fff;
+	color: #485fc7
 }
 
 .button.is-link.is-inverted.is-hovered,.button.is-link.is-inverted:hover {
-    background-color: #f2f2f2
+	background-color: #f2f2f2
 }
 
 .button.is-link.is-inverted[disabled],fieldset[disabled] .button.is-link.is-inverted {
-    background-color: #fff;
-    border-color: transparent;
-    box-shadow: none;
-    color: #485fc7
+	background-color: #fff;
+	border-color: transparent;
+	box-shadow: none;
+	color: #485fc7
 }
 
 .button.is-link.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-link.is-outlined {
-    background-color: transparent;
-    border-color: #485fc7;
-    color: #485fc7
+	background-color: transparent;
+	border-color: #485fc7;
+	color: #485fc7
 }
 
 .button.is-link.is-outlined.is-focused,.button.is-link.is-outlined.is-hovered,.button.is-link.is-outlined:focus,.button.is-link.is-outlined:hover {
-    background-color: #485fc7;
-    border-color: #485fc7;
-    color: #fff
+	background-color: #485fc7;
+	border-color: #485fc7;
+	color: #fff
 }
 
 .button.is-link.is-outlined.is-loading::after {
-    border-color: transparent transparent #485fc7 #485fc7!important
+	border-color: transparent transparent #485fc7 #485fc7!important
 }
 
 .button.is-link.is-outlined.is-loading.is-focused::after,.button.is-link.is-outlined.is-loading.is-hovered::after,.button.is-link.is-outlined.is-loading:focus::after,.button.is-link.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-link.is-outlined[disabled],fieldset[disabled] .button.is-link.is-outlined {
-    background-color: transparent;
-    border-color: #485fc7;
-    box-shadow: none;
-    color: #485fc7
+	background-color: transparent;
+	border-color: #485fc7;
+	box-shadow: none;
+	color: #485fc7
 }
 
 .button.is-link.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
 .button.is-link.is-inverted.is-outlined.is-focused,.button.is-link.is-inverted.is-outlined.is-hovered,.button.is-link.is-inverted.is-outlined:focus,.button.is-link.is-inverted.is-outlined:hover {
-    background-color: #fff;
-    color: #485fc7
+	background-color: #fff;
+	color: #485fc7
 }
 
 .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-link.is-inverted.is-outlined.is-loading:focus::after,.button.is-link.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #485fc7 #485fc7!important
+	border-color: transparent transparent #485fc7 #485fc7!important
 }
 
 .button.is-link.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-link.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 
 .button.is-link.is-light {
-    background-color: #eff1fa;
-    color: #3850b7
+	background-color: #eff1fa;
+	color: #3850b7
 }
 
 .button.is-link.is-light.is-hovered,.button.is-link.is-light:hover {
-    background-color: #e6e9f7;
-    border-color: transparent;
-    color: #3850b7
+	background-color: #e6e9f7;
+	border-color: transparent;
+	color: #3850b7
 }
 
 .button.is-link.is-light.is-active,.button.is-link.is-light:active {
-    background-color: #dce0f4;
-    border-color: transparent;
-    color: #3850b7
+	background-color: #dce0f4;
+	border-color: transparent;
+	color: #3850b7
 }
 
 .button.is-info {
-    background-color: #3e8ed0;
-    border-color: transparent;
-    color: #fff
+	background-color: #3e8ed0;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-info.is-hovered,.button.is-info:hover {
-    background-color: #3488ce;
-    border-color: transparent;
-    color: #fff
+	background-color: #3488ce;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-info.is-focused,.button.is-info:focus {
-    border-color: transparent;
-    color: #fff
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-info.is-focused:not(:active),.button.is-info:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(62,142,208,.25)
+	box-shadow: 0 0 0 .125em rgba(62,142,208,.25)
 }
 
 .button.is-info.is-active,.button.is-info:active {
-    background-color: #3082c5;
-    border-color: transparent;
-    color: #fff
+	background-color: #3082c5;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-info[disabled],fieldset[disabled] .button.is-info {
-    background-color: #3e8ed0;
-    border-color: #3e8ed0;
-    box-shadow: none
+	background-color: #3e8ed0;
+	border-color: #3e8ed0;
+	box-shadow: none
 }
 
 .button.is-info.is-inverted {
-    background-color: #fff;
-    color: #3e8ed0
+	background-color: #fff;
+	color: #3e8ed0
 }
 
 .button.is-info.is-inverted.is-hovered,.button.is-info.is-inverted:hover {
-    background-color: #f2f2f2
+	background-color: #f2f2f2
 }
 
 .button.is-info.is-inverted[disabled],fieldset[disabled] .button.is-info.is-inverted {
-    background-color: #fff;
-    border-color: transparent;
-    box-shadow: none;
-    color: #3e8ed0
+	background-color: #fff;
+	border-color: transparent;
+	box-shadow: none;
+	color: #3e8ed0
 }
 
 .button.is-info.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-info.is-outlined {
-    background-color: transparent;
-    border-color: #3e8ed0;
-    color: #3e8ed0
+	background-color: transparent;
+	border-color: #3e8ed0;
+	color: #3e8ed0
 }
 
 .button.is-info.is-outlined.is-focused,.button.is-info.is-outlined.is-hovered,.button.is-info.is-outlined:focus,.button.is-info.is-outlined:hover {
-    background-color: #3e8ed0;
-    border-color: #3e8ed0;
-    color: #fff
+	background-color: #3e8ed0;
+	border-color: #3e8ed0;
+	color: #fff
 }
 
 .button.is-info.is-outlined.is-loading::after {
-    border-color: transparent transparent #3e8ed0 #3e8ed0!important
+	border-color: transparent transparent #3e8ed0 #3e8ed0!important
 }
 
 .button.is-info.is-outlined.is-loading.is-focused::after,.button.is-info.is-outlined.is-loading.is-hovered::after,.button.is-info.is-outlined.is-loading:focus::after,.button.is-info.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-info.is-outlined[disabled],fieldset[disabled] .button.is-info.is-outlined {
-    background-color: transparent;
-    border-color: #3e8ed0;
-    box-shadow: none;
-    color: #3e8ed0
+	background-color: transparent;
+	border-color: #3e8ed0;
+	box-shadow: none;
+	color: #3e8ed0
 }
 
 .button.is-info.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
 .button.is-info.is-inverted.is-outlined.is-focused,.button.is-info.is-inverted.is-outlined.is-hovered,.button.is-info.is-inverted.is-outlined:focus,.button.is-info.is-inverted.is-outlined:hover {
-    background-color: #fff;
-    color: #3e8ed0
+	background-color: #fff;
+	color: #3e8ed0
 }
 
 .button.is-info.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-info.is-inverted.is-outlined.is-loading:focus::after,.button.is-info.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #3e8ed0 #3e8ed0!important
+	border-color: transparent transparent #3e8ed0 #3e8ed0!important
 }
 
 .button.is-info.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-info.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 
 .button.is-info.is-light {
-    background-color: #eff5fb;
-    color: #296fa8
+	background-color: #eff5fb;
+	color: #296fa8
 }
 
 .button.is-info.is-light.is-hovered,.button.is-info.is-light:hover {
-    background-color: #e4eff9;
-    border-color: transparent;
-    color: #296fa8
+	background-color: #e4eff9;
+	border-color: transparent;
+	color: #296fa8
 }
 
 .button.is-info.is-light.is-active,.button.is-info.is-light:active {
-    background-color: #dae9f6;
-    border-color: transparent;
-    color: #296fa8
+	background-color: #dae9f6;
+	border-color: transparent;
+	color: #296fa8
 }
 
 .button.is-success {
-    background-color: #48c78e;
-    border-color: transparent;
-    color: #fff
+	background-color: #48c78e;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-success.is-hovered,.button.is-success:hover {
-    background-color: #3ec487;
-    border-color: transparent;
-    color: #fff
+	background-color: #3ec487;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-success.is-focused,.button.is-success:focus {
-    border-color: transparent;
-    color: #fff
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-success.is-focused:not(:active),.button.is-success:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(72,199,142,.25)
+	box-shadow: 0 0 0 .125em rgba(72,199,142,.25)
 }
 
 .button.is-success.is-active,.button.is-success:active {
-    background-color: #3abb81;
-    border-color: transparent;
-    color: #fff
+	background-color: #3abb81;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-success[disabled],fieldset[disabled] .button.is-success {
-    background-color: #48c78e;
-    border-color: #48c78e;
-    box-shadow: none
+	background-color: #48c78e;
+	border-color: #48c78e;
+	box-shadow: none
 }
 
 .button.is-success.is-inverted {
-    background-color: #fff;
-    color: #48c78e
+	background-color: #fff;
+	color: #48c78e
 }
 
 .button.is-success.is-inverted.is-hovered,.button.is-success.is-inverted:hover {
-    background-color: #f2f2f2
+	background-color: #f2f2f2
 }
 
 .button.is-success.is-inverted[disabled],fieldset[disabled] .button.is-success.is-inverted {
-    background-color: #fff;
-    border-color: transparent;
-    box-shadow: none;
-    color: #48c78e
+	background-color: #fff;
+	border-color: transparent;
+	box-shadow: none;
+	color: #48c78e
 }
 
 .button.is-success.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-success.is-outlined {
-    background-color: transparent;
-    border-color: #48c78e;
-    color: #48c78e
+	background-color: transparent;
+	border-color: #48c78e;
+	color: #48c78e
 }
 
 .button.is-success.is-outlined.is-focused,.button.is-success.is-outlined.is-hovered,.button.is-success.is-outlined:focus,.button.is-success.is-outlined:hover {
-    background-color: #48c78e;
-    border-color: #48c78e;
-    color: #fff
+	background-color: #48c78e;
+	border-color: #48c78e;
+	color: #fff
 }
 
 .button.is-success.is-outlined.is-loading::after {
-    border-color: transparent transparent #48c78e #48c78e!important
+	border-color: transparent transparent #48c78e #48c78e!important
 }
 
 .button.is-success.is-outlined.is-loading.is-focused::after,.button.is-success.is-outlined.is-loading.is-hovered::after,.button.is-success.is-outlined.is-loading:focus::after,.button.is-success.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-success.is-outlined[disabled],fieldset[disabled] .button.is-success.is-outlined {
-    background-color: transparent;
-    border-color: #48c78e;
-    box-shadow: none;
-    color: #48c78e
+	background-color: transparent;
+	border-color: #48c78e;
+	box-shadow: none;
+	color: #48c78e
 }
 
 .button.is-success.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
 .button.is-success.is-inverted.is-outlined.is-focused,.button.is-success.is-inverted.is-outlined.is-hovered,.button.is-success.is-inverted.is-outlined:focus,.button.is-success.is-inverted.is-outlined:hover {
-    background-color: #fff;
-    color: #48c78e
+	background-color: #fff;
+	color: #48c78e
 }
 
 .button.is-success.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-success.is-inverted.is-outlined.is-loading:focus::after,.button.is-success.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #48c78e #48c78e!important
+	border-color: transparent transparent #48c78e #48c78e!important
 }
 
 .button.is-success.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-success.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 
 .button.is-success.is-light {
-    background-color: #effaf5;
-    color: #257953
+	background-color: #effaf5;
+	color: #257953
 }
 
 .button.is-success.is-light.is-hovered,.button.is-success.is-light:hover {
-    background-color: #e6f7ef;
-    border-color: transparent;
-    color: #257953
+	background-color: #e6f7ef;
+	border-color: transparent;
+	color: #257953
 }
 
 .button.is-success.is-light.is-active,.button.is-success.is-light:active {
-    background-color: #dcf4e9;
-    border-color: transparent;
-    color: #257953
+	background-color: #dcf4e9;
+	border-color: transparent;
+	color: #257953
 }
 
 .button.is-warning {
-    background-color: #ffe08a;
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	background-color: #ffe08a;
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-warning.is-hovered,.button.is-warning:hover {
-    background-color: #ffdc7d;
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	background-color: #ffdc7d;
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-warning.is-focused,.button.is-warning:focus {
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-warning.is-focused:not(:active),.button.is-warning:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(255,224,138,.25)
+	box-shadow: 0 0 0 .125em rgba(255,224,138,.25)
 }
 
 .button.is-warning.is-active,.button.is-warning:active {
-    background-color: #ffd970;
-    border-color: transparent;
-    color: rgba(0,0,0,.7)
+	background-color: #ffd970;
+	border-color: transparent;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-warning[disabled],fieldset[disabled] .button.is-warning {
-    background-color: #ffe08a;
-    border-color: #ffe08a;
-    box-shadow: none
+	background-color: #ffe08a;
+	border-color: #ffe08a;
+	box-shadow: none
 }
 
 .button.is-warning.is-inverted {
-    background-color: rgba(0,0,0,.7);
-    color: #ffe08a
+	background-color: rgba(0,0,0,.7);
+	color: #ffe08a
 }
 
 .button.is-warning.is-inverted.is-hovered,.button.is-warning.is-inverted:hover {
-    background-color: rgba(0,0,0,.7)
+	background-color: rgba(0,0,0,.7)
 }
 
 .button.is-warning.is-inverted[disabled],fieldset[disabled] .button.is-warning.is-inverted {
-    background-color: rgba(0,0,0,.7);
-    border-color: transparent;
-    box-shadow: none;
-    color: #ffe08a
+	background-color: rgba(0,0,0,.7);
+	border-color: transparent;
+	box-shadow: none;
+	color: #ffe08a
 }
 
 .button.is-warning.is-loading::after {
-    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+	border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
 }
 
 .button.is-warning.is-outlined {
-    background-color: transparent;
-    border-color: #ffe08a;
-    color: #ffe08a
+	background-color: transparent;
+	border-color: #ffe08a;
+	color: #ffe08a
 }
 
 .button.is-warning.is-outlined.is-focused,.button.is-warning.is-outlined.is-hovered,.button.is-warning.is-outlined:focus,.button.is-warning.is-outlined:hover {
-    background-color: #ffe08a;
-    border-color: #ffe08a;
-    color: rgba(0,0,0,.7)
+	background-color: #ffe08a;
+	border-color: #ffe08a;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-warning.is-outlined.is-loading::after {
-    border-color: transparent transparent #ffe08a #ffe08a!important
+	border-color: transparent transparent #ffe08a #ffe08a!important
 }
 
 .button.is-warning.is-outlined.is-loading.is-focused::after,.button.is-warning.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-outlined.is-loading:focus::after,.button.is-warning.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+	border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
 }
 
 .button.is-warning.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-outlined {
-    background-color: transparent;
-    border-color: #ffe08a;
-    box-shadow: none;
-    color: #ffe08a
+	background-color: transparent;
+	border-color: #ffe08a;
+	box-shadow: none;
+	color: #ffe08a
 }
 
 .button.is-warning.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: rgba(0,0,0,.7);
-    color: rgba(0,0,0,.7)
+	background-color: transparent;
+	border-color: rgba(0,0,0,.7);
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-warning.is-inverted.is-outlined.is-focused,.button.is-warning.is-inverted.is-outlined.is-hovered,.button.is-warning.is-inverted.is-outlined:focus,.button.is-warning.is-inverted.is-outlined:hover {
-    background-color: rgba(0,0,0,.7);
-    color: #ffe08a
+	background-color: rgba(0,0,0,.7);
+	color: #ffe08a
 }
 
 .button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-inverted.is-outlined.is-loading:focus::after,.button.is-warning.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #ffe08a #ffe08a!important
+	border-color: transparent transparent #ffe08a #ffe08a!important
 }
 
 .button.is-warning.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: rgba(0,0,0,.7);
-    box-shadow: none;
-    color: rgba(0,0,0,.7)
+	background-color: transparent;
+	border-color: rgba(0,0,0,.7);
+	box-shadow: none;
+	color: rgba(0,0,0,.7)
 }
 
 .button.is-warning.is-light {
-    background-color: #fffaeb;
-    color: #946c00
+	background-color: #fffaeb;
+	color: #946c00
 }
 
 .button.is-warning.is-light.is-hovered,.button.is-warning.is-light:hover {
-    background-color: #fff6de;
-    border-color: transparent;
-    color: #946c00
+	background-color: #fff6de;
+	border-color: transparent;
+	color: #946c00
 }
 
 .button.is-warning.is-light.is-active,.button.is-warning.is-light:active {
-    background-color: #fff3d1;
-    border-color: transparent;
-    color: #946c00
+	background-color: #fff3d1;
+	border-color: transparent;
+	color: #946c00
 }
 
 .button.is-danger {
-    background-color: #f14668;
-    border-color: transparent;
-    color: #fff
+	background-color: #f14668;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-danger.is-hovered,.button.is-danger:hover {
-    background-color: #f03a5f;
-    border-color: transparent;
-    color: #fff
+	background-color: #f03a5f;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-danger.is-focused,.button.is-danger:focus {
-    border-color: transparent;
-    color: #fff
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-danger.is-focused:not(:active),.button.is-danger:focus:not(:active) {
-    box-shadow: 0 0 0 .125em rgba(241,70,104,.25)
+	box-shadow: 0 0 0 .125em rgba(241,70,104,.25)
 }
 
 .button.is-danger.is-active,.button.is-danger:active {
-    background-color: #ef2e55;
-    border-color: transparent;
-    color: #fff
+	background-color: #ef2e55;
+	border-color: transparent;
+	color: #fff
 }
 
 .button.is-danger[disabled],fieldset[disabled] .button.is-danger {
-    background-color: #f14668;
-    border-color: #f14668;
-    box-shadow: none
+	background-color: #f14668;
+	border-color: #f14668;
+	box-shadow: none
 }
 
 .button.is-danger.is-inverted {
-    background-color: #fff;
-    color: #f14668
+	background-color: #fff;
+	color: #f14668
 }
 
 .button.is-danger.is-inverted.is-hovered,.button.is-danger.is-inverted:hover {
-    background-color: #f2f2f2
+	background-color: #f2f2f2
 }
 
 .button.is-danger.is-inverted[disabled],fieldset[disabled] .button.is-danger.is-inverted {
-    background-color: #fff;
-    border-color: transparent;
-    box-shadow: none;
-    color: #f14668
+	background-color: #fff;
+	border-color: transparent;
+	box-shadow: none;
+	color: #f14668
 }
 
 .button.is-danger.is-loading::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-danger.is-outlined {
-    background-color: transparent;
-    border-color: #f14668;
-    color: #f14668
+	background-color: transparent;
+	border-color: #f14668;
+	color: #f14668
 }
 
 .button.is-danger.is-outlined.is-focused,.button.is-danger.is-outlined.is-hovered,.button.is-danger.is-outlined:focus,.button.is-danger.is-outlined:hover {
-    background-color: #f14668;
-    border-color: #f14668;
-    color: #fff
+	background-color: #f14668;
+	border-color: #f14668;
+	color: #fff
 }
 
 .button.is-danger.is-outlined.is-loading::after {
-    border-color: transparent transparent #f14668 #f14668!important
+	border-color: transparent transparent #f14668 #f14668!important
 }
 
 .button.is-danger.is-outlined.is-loading.is-focused::after,.button.is-danger.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-outlined.is-loading:focus::after,.button.is-danger.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #fff #fff!important
+	border-color: transparent transparent #fff #fff!important
 }
 
 .button.is-danger.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-outlined {
-    background-color: transparent;
-    border-color: #f14668;
-    box-shadow: none;
-    color: #f14668
+	background-color: transparent;
+	border-color: #f14668;
+	box-shadow: none;
+	color: #f14668
 }
 
 .button.is-danger.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	color: #fff
 }
 
 .button.is-danger.is-inverted.is-outlined.is-focused,.button.is-danger.is-inverted.is-outlined.is-hovered,.button.is-danger.is-inverted.is-outlined:focus,.button.is-danger.is-inverted.is-outlined:hover {
-    background-color: #fff;
-    color: #f14668
+	background-color: #fff;
+	color: #f14668
 }
 
 .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-inverted.is-outlined.is-loading:focus::after,.button.is-danger.is-inverted.is-outlined.is-loading:hover::after {
-    border-color: transparent transparent #f14668 #f14668!important
+	border-color: transparent transparent #f14668 #f14668!important
 }
 
 .button.is-danger.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
-    background-color: transparent;
-    border-color: #fff;
-    box-shadow: none;
-    color: #fff
+	background-color: transparent;
+	border-color: #fff;
+	box-shadow: none;
+	color: #fff
 }
 
 .button.is-danger.is-light {
-    background-color: #feecf0;
-    color: #cc0f35
+	background-color: #feecf0;
+	color: #cc0f35
 }
 
 .button.is-danger.is-light.is-hovered,.button.is-danger.is-light:hover {
-    background-color: #fde0e6;
-    border-color: transparent;
-    color: #cc0f35
+	background-color: #fde0e6;
+	border-color: transparent;
+	color: #cc0f35
 }
 
 .button.is-danger.is-light.is-active,.button.is-danger.is-light:active {
-    background-color: #fcd4dc;
-    border-color: transparent;
-    color: #cc0f35
+	background-color: #fcd4dc;
+	border-color: transparent;
+	color: #cc0f35
 }
 */
\ No newline at end of file
diff --git a/pagetop/static/base/css/inception.css b/pagetop/static/base/css/inception.css
index 8c474b84..b21da2ea 100644
--- a/pagetop/static/base/css/inception.css
+++ b/pagetop/static/base/css/inception.css
@@ -8,7 +8,7 @@ body {
 	font-size: var(--pt-fs--base);
 	font-weight: var(--pt-fw--base);
 	line-height: var(--pt-lh--base);
-	color: var(--pt-color);
+	color: var(--pt-color--text);
 	background-color: var(--pt-color--bg);
 	-webkit-text-size-adjust: 100%;
 	-webkit-tap-highlight-color: transparent;
@@ -62,14 +62,14 @@ p {
 }
 
 a {
-	color: var(--pt-color--primary);
+	color: var(--pt-color--default);
 	transition: color .15s ease-in-out;
 }
 a:hover {
-	color: var(--pt-color--primary-dark);
+	color: var(--pt-color--default-dark);
 }
 a:active {
-	color: var(--pt-color--primary-light);
+	color: var(--pt-color--default-light);
 }
 
 /* LAYOUT */
@@ -95,7 +95,7 @@ a:active {
 #footer__inner {
 	color: var(--pt-color--gray-65);
 	background: var(--pt-color--gray-20);
-	padding: var(--pt-gap-3) 0 var(--pt-gap-12);
+	padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap));
 }
 #footer__inner a {
 	color: var(--pt-color--white);
diff --git a/pagetop/static/base/css/menu.css b/pagetop/static/base/css/menu.css
index 18f64c72..a74155e0 100644
--- a/pagetop/static/base/css/menu.css
+++ b/pagetop/static/base/css/menu.css
@@ -37,7 +37,7 @@
 .pt-menu__nav li > a {
 	position: relative;
 	font-weight: 500;
-	color: var(--pt-color);
+	color: var(--pt-color--text);
 	text-rendering: optimizeLegibility;
 }
 .pt-menu__nav li > a {
@@ -135,7 +135,7 @@
 		height: 2px;
 		margin: 12.675% 0;
 		border-radius: var(--pt-border-radius);
-		background: var(--pt-color);
+		background: var(--pt-color--text);
 	}
 
 	.pt-menu__nav {
@@ -234,7 +234,7 @@
 		min-width: var(--pt-menu--item-height);
 		height: var(--pt-menu--item-height);
 		line-height: var(--pt-menu--item-height);
-		color: var(--pt-color);
+		color: var(--pt-color--text);
 		cursor: pointer;
 		display: flex;
 		align-items: center;
diff --git a/pagetop/static/base/css/root.css b/pagetop/static/base/css/root.css
index 03c9efe2..b210b659 100644
--- a/pagetop/static/base/css/root.css
+++ b/pagetop/static/base/css/root.css
@@ -91,23 +91,51 @@
 	--pt-gap-0-75: calc(0.75 * var(--pt-gap));
 	--pt-gap-1-5: calc(1.5 * var(--pt-gap));
 	--pt-gap-2: calc(2 * var(--pt-gap));
-	--pt-gap-2-5: calc(2.5 * var(--pt-gap));
-	--pt-gap-3: calc(3 * var(--pt-gap));
-	--pt-gap-4: calc(4 * var(--pt-gap));
-	--pt-gap-5: calc(5 * var(--pt-gap));
-	--pt-gap-6: calc(6 * var(--pt-gap));
-	--pt-gap-7: calc(7 * var(--pt-gap));
-	--pt-gap-8: calc(8 * var(--pt-gap));
-	--pt-gap-9: calc(9 * var(--pt-gap));
-	--pt-gap-10: calc(10 * var(--pt-gap));
-	--pt-gap-11: calc(11 * var(--pt-gap));
-	--pt-gap-12: calc(12 * var(--pt-gap));
 
-	--pt-color--primary-hue: 216;
-	--pt-color--primary-sat: 98%;
-	--pt-color--primary-light: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 60%);
-	--pt-color--primary-dark: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 40%);
-	--pt-color--primary: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 50%);
+	--pt-color--default-hue: 216;
+	--pt-color--default-sat: 60%;
+	--pt-color--default-light: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 60%);
+	--pt-color--default-dark: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 40%);
+	--pt-color--default: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 50%);
+
+	--pt-color--info-hue: 190;
+	--pt-color--info-sat: 90%;
+	--pt-color--info-light: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 60%);
+	--pt-color--info-dark: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 40%);
+	--pt-color--info: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 50%);
+
+	--pt-color--success-hue: 150;
+	--pt-color--success-sat: 50%;
+	--pt-color--success-light: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 60%);
+	--pt-color--success-dark: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 40%);
+	--pt-color--success: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 50%);
+
+	--pt-color--warning-hue: 44;
+	--pt-color--warning-sat: 100%;
+	--pt-color--warning-light: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 60%);
+	--pt-color--warning-dark: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 48%);
+	--pt-color--warning: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 50%);
+
+	--pt-color--danger-hue: 348;
+	--pt-color--danger-sat: 86%;
+	--pt-color--danger-light: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 60%);
+	--pt-color--danger-dark: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 40%);
+	--pt-color--danger: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 50%);
+
+	--pt-color--light-hue: 0;
+	--pt-color--light-sat: 0%;
+	--pt-color--light-light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 98%);
+	--pt-color--light-dark: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 92%);
+	--pt-color--light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 96%);
+
+	--pt-color--dark-hue: 0;
+	--pt-color--dark-sat: 0%;
+	--pt-color--dark-light: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 40%);
+	--pt-color--dark-dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 8%);
+	--pt-color--dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 25%);
+
+
+
 
 	--pt-color--gray-hue: 201;
 	--pt-color--gray-sat: 15%;
@@ -122,9 +150,12 @@
 	--pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%);
 	--pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%);
 
-	--pt-color--white: #fff;
+
+
+
 	--pt-color--bg: #fafafa;
-	--pt-color: #212529;
+	--pt-color--text: #212529;
+	--pt-color--white: #fff;
 
 /*
 
@@ -132,8 +163,8 @@
 	--color-text-neutral-soft: var(--color--gray-45);
 	--color-text-neutral-medium: var(--color--gray-20);
 	--color-text-neutral-loud: var(--color--gray-5);
-	--color-text-primary-medium: var(--pt-color--primary-40);
-	--color-text-primary-loud: var(--pt-color--primary-30);
+	--color-text-primary-medium: var(--pt-color--default-40);
+	--color-text-primary-loud: var(--pt-color--default-30);
 	--color--black: #000;
 */
 /*
@@ -146,7 +177,7 @@
 	--pt-border-radius: 0.375rem;
 
 	/* Menu component */
-	--pt-menu--color-bg: var(--pt-color--gray-100);
+	--pt-menu--color-bg: var(--pt-color--bg);
 	--pt-menu--color-highlight: #e91e63;
 	--pt-menu--color-border: rgba(0, 0, 0, 0.1);
 	--pt-menu--color-shadow: rgba(0, 0, 0, 0.06);