@broxus/react-uikit 0.18.0 → 0.19.0

package/dist/esm/styles/variables.scss

@@ -1,1867 +0,0 @@
-//
-// Component:       Variables
-// Description:     Defines common values which are used across all components
-//
-// ========================================================================
-
-@import 'mixin.scss';
-
-
-// Breakpoints
-// ========================================================================
-
-// Phone Portrait:   Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
-// Phone Landscape:  Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
-// Tablet Portrait:  iPad (768x1024), Galaxy Tab (800x1280),
-// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
-// Desktop:          Galaxy Tab (1280x800), iPad Pro (1366x1024)
-
-$breakpoint-xsmall:                                             480px !default;  // Phone portrait
-$breakpoint-small:                                              640px !default;  // Phone landscape
-$breakpoint-medium:                                             960px !default;  // Tablet Landscape
-$breakpoint-large:                                              1200px !default; // Desktop
-$breakpoint-xlarge:                                             1600px !default; // Large Screens
-$breakpoint-2xlarge:                                            2560px !default; // Wide Screens
-$breakpoint-3xlarge:                                            3440px !default; // Ultra Wide Screens
-
-$breakpoint-xsmall-max:                                         ($breakpoint-small - 1) !default;
-$breakpoint-small-max:                                          ($breakpoint-medium - 1) !default;
-$breakpoint-medium-max:                                         ($breakpoint-large - 1) !default;
-$breakpoint-large-max:                                          ($breakpoint-xlarge - 1) !default;
-$breakpoint-xlarge-max:                                         ($breakpoint-2xlarge - 1) !default;
-$breakpoint-2xlarge-max:                                        ($breakpoint-3xlarge - 1) !default;
-
-
-// Global variables
-// ========================================================================
-
-//
-// Typography
-//
-
-$global-font-family:                                            -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-$global-font-size:                                              16px !default;
-$global-font-weight:                                            400 !default;
-$global-bold-font-weight:                                       600 !default;
-$global-line-height:                                            1.25 !default;       // 24px
-
-$global-2xlarge-font-size:                                      2.625rem !default;   // 42px
-$global-xlarge-font-size:                                       2rem !default;       // 32px
-$global-large-font-size:                                        1.5rem !default;     // 24px
-$global-medium-font-size:                                       1.25rem !default;    // 20px
-$global-small-font-size:                                        0.875rem !default;   // 14px
-$global-xsmall-font-size:                                       0.75rem !default;    // 12px
-$global-2xsmall-font-size:                                      0.6875rem !default;  // 11px
-
-//
-// Colors
-//
-
-$global-color:                                                  #666 !default;
-$global-emphasis-color:                                         #333 !default;
-$global-muted-color:                                            #999 !default;
-$global-link-color:                                             #1e87f0 !default;
-$global-link-hover-color:                                       #0f6ecd !default;
-$global-inverse-color:                                          #fff !default;
-
-//
-// Backgrounds
-//
-
-$global-background:                                             #fff !default;
-$global-default-background:                                     #e5e5e5 !default;
-$global-muted-background:                                       #f8f8f8 !default;
-$global-primary-background:                                     #1e87f0 !default;
-$global-secondary-background:                                   #222 !default;
-$global-tertiary-background:                                    #b8b8b8 !default;
-$global-success-background:                                     #1cb57c !default;
-$global-warning-background:                                     #ffbc60 !default;
-$global-danger-background:                                      #f5604b !default;
-
-//
-// Borders
-//
-
-$global-border-width:                                           1px !default;
-$global-border-style:                                           solid !default;
-$global-border:                                                 darken($global-default-background, 3%) !default;
-$global-muted-border:                                           $global-muted-background !default;
-$global-primary-border:                                         $global-primary-background !default;
-$global-secondary-border:                                       $global-secondary-background !default;
-$global-tertiary-border:                                        $global-tertiary-background !default;
-$global-border-radius:                                          0 !default;
-$global-small-border-radius:                                    0 !default;
-
-//
-// Box-Shadows
-//
-
-$global-small-box-shadow:                                       0 2px 8px rgb(0 0 0 / 8%) !default;
-$global-medium-box-shadow:                                      0 5px 15px rgb(0 0 0 / 8%) !default;
-$global-large-box-shadow:                                       0 14px 25px rgb(0 0 0 / 16%) !default;
-$global-xlarge-box-shadow:                                      0 28px 50px rgb(0 0 0 / 16%) !default;
-
-//
-// Spacings
-//
-
-// Used in margin, section, list
-$global-margin:                                                 20px !default;
-$global-xsmall-margin:                                          5px !default;
-$global-small-margin:                                           10px !default;
-$global-medium-margin:                                          40px !default;
-$global-large-margin:                                           70px !default;
-$global-xlarge-margin:                                          140px !default;
-
-// Used in grid, column, container, align, card, padding
-$global-gutter:                                                 30px !default;
-$global-xsmall-gutter:                                          5px !default;
-$global-small-gutter:                                           15px !default;
-$global-medium-gutter:                                          40px !default;
-$global-large-gutter:                                           70px !default;
-$global-xlarge-gutter:                                          100px !default;
-
-//
-// Controls
-//
-
-$global-control-height:                                         40px !default;
-$global-control-xsmall-height:                                  20px !default;
-$global-control-small-height:                                   30px !default;
-$global-control-medium-height:                                  50px !default;
-$global-control-large-height:                                   60px !default;
-$global-control-xlarge-height:                                  70px !default;
-
-//
-// Z-index
-//
-
-$global-z-index:                                                1000 !default;
-
-
-// Inverse
-// ========================================================================
-
-$inverse-global-color-mode:                                     light !default;
-$inverse-global-color:                                          rgba($global-inverse-color, 70%) !default;
-$inverse-global-emphasis-color:                                 $global-inverse-color !default;
-$inverse-global-muted-color:                                    rgba($global-inverse-color, 50%) !default;
-$inverse-global-inverse-color:                                  $global-color !default;
-$inverse-global-primary-background:                             $global-inverse-color !default;
-$inverse-global-muted-background:                               rgba($global-inverse-color, 10%) !default;
-$inverse-global-border:                                         rgba($global-inverse-color, 20%) !default;
-
-
-// Animation
-// ========================================================================
-
-$animation-duration:                                            0.5s !default;
-$animation-fade-duration:                                       0.8s !default;
-$animation-stroke-duration:                                     2s !default;
-$animation-kenburns-duration:                                   15s !default;
-$animation-fast-duration:                                       0.1s !default;
-$animation-medium-fast-duration:                                0.2s !default;
-$animation-slide-small-translate:                               10px !default;
-$animation-slide-medium-translate:                              50px !default;
-$ease-base-out:                                                 cubic-bezier(0.7, 0.3, 0.1, 1) !default;
-$ease-base-in:                                                  cubic-bezier(0.9, 0, 0.3, 0.7) !default;
-$ease-out:                                                      cubic-bezier(0.215, 0.61, 0.355, 1) !default;
-$ease-in:                                                       cubic-bezier(0.55, 0.055, 0.675, 0.19) !default;
-$ease-in-out:                                                   cubic-bezier(0.645, 0.045, 0.355, 1) !default;
-$ease-out-back:                                                 cubic-bezier(0.12, 0.4, 0.29, 1.46) !default;
-$ease-in-back:                                                  cubic-bezier(0.71, -0.46, 0.88, 0.6) !default;
-$ease-in-out-back:                                              cubic-bezier(0.71, -0.46, 0.29, 1.46) !default;
-$ease-out-circ:                                                 cubic-bezier(0.08, 0.82, 0.17, 1) !default;
-$ease-in-circ:                                                  cubic-bezier(0.6, 0.04, 0.98, 0.34) !default;
-$ease-in-out-circ:                                              cubic-bezier(0.78, 0.14, 0.15, 0.86) !default;
-$ease-out-quint:                                                cubic-bezier(0.23, 1, 0.32, 1) !default;
-$ease-in-quint:                                                 cubic-bezier(0.755, 0.05, 0.855, 0.06) !default;
-$ease-in-out-quint:                                             cubic-bezier(0.86, 0, 0.07, 1) !default;
-
-
-// Transition
-// ========================================================================
-
-$transition-duration:                                           0.3s !default;
-$transition-scale:                                              1.1 !default;
-$transition-slide-small-translate:                              10px !default;
-$transition-slide-medium-translate:                             50px !default;
-$transition-fast-duration:                                      0.1s !default;
-$transition-medium-fast-duration:                               0.2s !default;
-$transition-slow-duration:                                      0.7s !default;
-
-
-// Accordion
-// ========================================================================
-
-$accordion-item-margin-top:                                     $global-margin !default;
-$accordion-title-font-size:                                     $global-medium-font-size !default;
-$accordion-title-line-height:                                   1.4 !default;
-$accordion-title-color:                                         $global-emphasis-color !default;
-$accordion-title-hover-color:                                   $global-color !default;
-$accordion-header-extra-margin-left:                            $global-small-margin !default;
-$accordion-content-margin-top:                                  $global-margin !default;
-$accordion-icon-margin-right:                                   $global-small-margin !default;
-$accordion-icon-color:                                          $global-color !default;
-$accordion-icon-size:                                           1.4rem !default;
-
-// Inverse
-$inverse-accordion-title-color:                                 $inverse-global-emphasis-color !default;
-$inverse-accordion-title-hover-color:                           $inverse-global-color !default;
-$inverse-accordion-item-disabled-color:                         $inverse-global-emphasis-color !default;
-
-
-// Alert
-// ========================================================================
-
-$alert-border-radius:                                           $global-border-radius !default;
-$alert-margin-vertical:                                         $global-margin !default;
-$alert-padding:                                                 $global-small-gutter !default;
-$alert-padding-right:                                           $alert-padding + 15px !default;
-$alert-background:                                              $global-muted-background !default;
-$alert-color:                                                   $global-color !default;
-$alert-close-top:                                               $alert-padding !default;
-$alert-close-right:                                             $alert-padding !default;
-$alert-primary-background:                                      lighten(mix(white, $global-primary-background, 40%), 20%) !default;
-$alert-primary-color:                                           $global-primary-background !default;
-$alert-success-background:                                      lighten(mix(white, $global-success-background, 40%), 25%) !default;
-$alert-success-color:                                           $global-success-background !default;
-$alert-warning-background:                                      lighten(mix(white, $global-warning-background, 45%), 15%) !default;
-$alert-warning-color:                                           $global-warning-background !default;
-$alert-danger-background:                                       lighten(mix(white, $global-danger-background, 40%), 20%) !default;
-$alert-danger-color:                                            $global-danger-background !default;
-
-
-// Align
-// ========================================================================
-
-$align-margin-horizontal:                                       $global-gutter !default;
-$align-margin-vertical:                                         $global-gutter !default;
-$align-margin-horizontal-l:                                     $global-medium-gutter !default;
-
-
-// Article
-// ========================================================================
-
-$article-margin-top:                                            $global-large-margin !default;
-$article-title-font-size-m:                                     $global-2xlarge-font-size !default;
-$article-title-font-size:                                       $article-title-font-size-m * 0.85 !default;
-$article-title-line-height:                                     1.2 !default;
-$article-meta-font-size:                                        $global-small-font-size !default;
-$article-meta-line-height:                                      1.4 !default;
-$article-meta-color:                                            $global-muted-color !default;
-$article-meta-link-color:                                       $article-meta-color !default;
-$article-meta-link-hover-color:                                 $global-color !default;
-
-// Inverse
-$inverse-article-meta-color:                                    $inverse-global-muted-color !default;
-
-
-// Background
-// ========================================================================
-
-$background-default-background:                                 $global-background !default;
-$background-muted-background:                                   $global-muted-background !default;
-$background-primary-background:                                 $global-primary-background !default;
-$background-secondary-background:                               $global-secondary-background !default;
-$background-tertiary-background:                                $global-tertiary-background !default;
-
-
-// Badge
-// ========================================================================
-
-$badge-size:                                                    22px !default;
-$badge-padding-vertical:                                        0 !default;
-$badge-padding-horizontal:                                      5px !default;
-$badge-border-radius:                                           500px !default;
-$badge-background:                                              $global-primary-background !default;
-$badge-color:                                                   $global-inverse-color !default;
-$badge-font-size:                                               $global-small-font-size !default;
-$badge-hover-color:                                             $global-inverse-color !default;
-
-// Inverse
-$inverse-badge-background:                                      $inverse-global-primary-background !default;
-$inverse-badge-color:                                           $inverse-global-inverse-color !default;
-$inverse-badge-hover-color:                                     $inverse-global-inverse-color !default;
-
-
-// Base
-// ========================================================================
-
-$base-body-background:                                          $global-background !default;
-$base-body-font-family:                                         $global-font-family !default;
-$base-body-font-weight:                                         normal !default;
-$base-body-font-size:                                           $global-font-size !default;
-$base-body-line-height:                                         $global-line-height !default;
-$base-body-color:                                               $global-color !default;
-$base-link-color:                                               $global-link-color !default;
-$base-link-text-decoration:                                     none !default;
-$base-link-hover-color:                                         $global-link-hover-color !default;
-$base-link-hover-text-decoration:                               underline !default;
-$base-strong-font-weight:                                       bolder !default;
-$base-code-font-size:                                           $global-small-font-size !default;
-$base-code-font-family:                                         'Consolas', monaco, monospace !default;
-$base-code-color:                                               $global-danger-background !default;
-$base-code-padding-horizontal:                                  6px !default;
-$base-code-padding-vertical:                                    2px !default;
-$base-em-color:                                                 $global-danger-background !default;
-$base-ins-background:                                           #ffd !default;
-$base-ins-color:                                                $global-color !default;
-$base-mark-background:                                          #ffd !default;
-$base-mark-color:                                               $global-color !default;
-$base-quote-font-style:                                         italic !default;
-$base-small-font-size:                                          80% !default;
-$base-margin-vertical:                                          $global-margin !default;
-$base-heading-font-family:                                      $global-font-family !default;
-$base-heading-font-weight:                                      normal !default;
-$base-heading-color:                                            $global-inverse-color !default;
-$base-heading-text-transform:                                   none !default;
-$base-heading-margin-top:                                       $global-medium-margin !default;
-$base-h1-font-size-m:                                           $global-2xlarge-font-size !default;
-$base-h1-font-size:                                             $base-h1-font-size-m * 0.85 !default;
-$base-h1-line-height:                                           1.2 !default;
-$base-h2-font-size-m:                                           $global-xlarge-font-size !default;
-$base-h2-font-size:                                             $base-h2-font-size-m * 0.85 !default;
-$base-h2-line-height:                                           1.3 !default;
-$base-h3-font-size:                                             $global-large-font-size !default;
-$base-h3-line-height:                                           1.4 !default;
-$base-h4-font-size:                                             $global-medium-font-size !default;
-$base-h4-line-height:                                           1.4 !default;
-$base-h5-font-size:                                             $global-font-size !default;
-$base-h5-line-height:                                           1.4 !default;
-$base-h6-font-size:                                             $global-small-font-size !default;
-$base-h6-line-height:                                           1.4 !default;
-$base-list-padding-left:                                        30px !default;
-$base-hr-margin-vertical:                                       $global-margin !default;
-$base-hr-border-width:                                          $global-border-width !default;
-$base-hr-border:                                                $global-border !default;
-$base-blockquote-color:                                         $global-emphasis-color !default;
-$base-blockquote-font-size:                                     $global-medium-font-size !default;
-$base-blockquote-line-height:                                   1.5 !default;
-$base-blockquote-font-style:                                    italic !default;
-$base-blockquote-margin-vertical:                               $global-margin !default;
-$base-blockquote-footer-color:                                  $global-color !default;
-$base-blockquote-footer-margin-top:                             $global-small-margin !default;
-$base-blockquote-footer-font-size:                              $global-small-font-size !default;
-$base-blockquote-footer-line-height:                            1.5 !default;
-$base-pre-font-size:                                            $global-small-font-size !default;
-$base-pre-line-height:                                          1.5 !default;
-$base-pre-font-family:                                          $base-code-font-family !default;
-$base-pre-color:                                                $global-color !default;
-$base-focus-outline-width:                                      2px !default;
-$base-focus-outline-style:                                      dotted !default;
-$base-focus-outline:                                            $global-emphasis-color !default;
-$base-focus-outline-offset:                                     1px !default;
-$base-selection-background:                                     #39f !default;
-$base-selection-color:                                          $global-inverse-color !default;
-
-// Inverse
-$inverse-base-color:                                            $inverse-global-color !default;
-$inverse-base-link-color:                                       $inverse-global-emphasis-color !default;
-$inverse-base-link-hover-color:                                 $inverse-global-emphasis-color !default;
-$inverse-base-code-color:                                       $inverse-global-color !default;
-$inverse-base-em-color:                                         $inverse-global-emphasis-color !default;
-$inverse-base-heading-color:                                    $inverse-global-emphasis-color !default;
-$inverse-base-hr-border:                                        $inverse-global-border !default;
-$inverse-base-focus-outline:                                    $inverse-global-emphasis-color !default;
-$inverse-base-blockquote-color:                                 $inverse-global-emphasis-color !default;
-$inverse-base-blockquote-footer-color:                          $inverse-global-color !default;
-
-
-// Breadcrumb
-// ========================================================================
-
-$breadcrumb-item-font-size:                                     $global-small-font-size !default;
-$breadcrumb-item-color:                                         $global-muted-color !default;
-$breadcrumb-item-hover-color:                                   $global-color !default;
-$breadcrumb-item-hover-text-decoration:                         none !default;
-$breadcrumb-item-active-color:                                  $global-color !default;
-$breadcrumb-divider:                                            '"/"' !default;
-$breadcrumb-divider-margin-horizontal:                          20px !default;
-$breadcrumb-divider-font-size:                                  $breadcrumb-item-font-size !default;
-$breadcrumb-divider-color:                                      $global-muted-color !default;
-
-// Inverse
-$inverse-breadcrumb-item-color:                                 $inverse-global-muted-color !default;
-$inverse-breadcrumb-item-hover-color:                           $inverse-global-color !default;
-$inverse-breadcrumb-item-active-color:                          $inverse-global-color !default;
-$inverse-breadcrumb-divider-color:                              $inverse-global-muted-color !default;
-
-
-// Button
-// ========================================================================
-
-$button-disabled-mode:                                          same !default;
-$button-line-height:                                            $global-control-height !default;
-$button-xsmall-line-height:                                     $global-control-xsmall-height !default;
-$button-small-line-height:                                      $global-control-small-height !default;
-$button-medium-line-height:                                     $global-control-medium-height !default;
-$button-large-line-height:                                      $global-control-large-height !default;
-$button-xlarge-line-height:                                     $global-control-xlarge-height !default;
-$button-font-size:                                              $global-font-size !default;
-$button-xsmall-font-size:                                       $global-2xsmall-font-size !default;
-$button-small-font-size:                                        $global-small-font-size !default;
-$button-medium-font-size:                                       $global-font-size !default;
-$button-large-font-size:                                        $global-medium-font-size !default;
-$button-xlarge-font-size:                                       $global-large-font-size !default;
-$button-padding-horizontal:                                     $global-gutter !default;
-$button-xsmall-padding-horizontal:                              $global-xsmall-gutter !default;
-$button-small-padding-horizontal:                               $global-small-gutter !default;
-$button-medium-padding-horizontal:                              $global-medium-gutter !default;
-$button-large-padding-horizontal:                               $global-large-gutter !default;
-$button-xlarge-padding-horizontal:                              $global-xlarge-gutter !default;
-$button-default-background:                                     $global-muted-background !default;
-$button-default-color:                                          $global-emphasis-color !default;
-$button-default-hover-background:                               darken($button-default-background, 5%) !default;
-$button-default-hover-color:                                    $global-emphasis-color !default;
-$button-default-active-background:                              darken($button-default-background, 10%) !default;
-$button-default-active-color:                                   $global-emphasis-color !default;
-$button-primary-background:                                     $global-primary-background !default;
-$button-primary-color:                                          $global-inverse-color !default;
-$button-primary-hover-background:                               darken($button-primary-background, 5%) !default;
-$button-primary-hover-color:                                    $global-inverse-color !default;
-$button-primary-active-background:                              darken($button-primary-background, 10%) !default;
-$button-primary-active-color:                                   $global-inverse-color !default;
-$button-secondary-background:                                   $global-secondary-background !default;
-$button-secondary-color:                                        $global-inverse-color !default;
-$button-secondary-hover-background:                             lighten($button-secondary-background, 5%) !default;
-$button-secondary-hover-color:                                  $global-inverse-color !default;
-$button-secondary-active-background:                            darken($button-secondary-background, 10%) !default;
-$button-secondary-active-color:                                 $global-inverse-color !default;
-$button-tertiary-background:                                    $global-tertiary-background !default;
-$button-tertiary-color:                                         $global-inverse-color !default;
-$button-tertiary-hover-background:                              darken($button-tertiary-background, 5%) !default;
-$button-tertiary-hover-color:                                   $global-inverse-color !default;
-$button-tertiary-active-background:                             darken($button-tertiary-background, 10%) !default;
-$button-tertiary-active-color:                                  $global-inverse-color !default;
-$button-danger-background:                                      $global-danger-background !default;
-$button-danger-color:                                           $global-inverse-color !default;
-$button-danger-hover-background:                                darken($button-danger-background, 5%) !default;
-$button-danger-hover-color:                                     $global-inverse-color !default;
-$button-danger-active-background:                               darken($button-danger-background, 10%) !default;
-$button-danger-active-color:                                    $global-inverse-color !default;
-$button-circle-border-radius:                                   40px !default;
-$button-round-border-radius:                                    4px !default;
-$button-disabled-background:                                    $global-muted-background !default;
-$button-disabled-color:                                         $global-muted-color !default;
-$button-text-line-height:                                       $global-line-height !default;
-$button-text-color:                                             $global-muted-color !default;
-$button-text-hover-color:                                       $global-color !default;
-$button-text-disabled-color:                                    $global-muted-color !default;
-$button-link-line-height:                                       $global-line-height !default;
-$button-link-color:                                             $global-link-color !default;
-$button-link-hover-color:                                       $global-link-hover-color !default;
-$button-link-hover-text-decoration:                             underline !default;
-$button-link-disabled-color:                                    $global-muted-color !default;
-
-// Inverse
-$inverse-button-color:                                          $inverse-global-inverse-color !default;
-$inverse-button-default-background:                             $inverse-global-primary-background !default;
-$inverse-button-default-color:                                  $inverse-global-inverse-color !default;
-$inverse-button-default-hover-background:                       darken($inverse-button-default-background, 5%) !default;
-$inverse-button-default-hover-color:                            $inverse-global-inverse-color !default;
-$inverse-button-default-active-background:                      darken($inverse-button-default-background, 10%) !default;
-$inverse-button-default-active-color:                           $inverse-global-inverse-color !default;
-$inverse-button-primary-background:                             $inverse-global-primary-background !default;
-$inverse-button-primary-color:                                  $inverse-global-inverse-color !default;
-$inverse-button-primary-hover-background:                       darken($inverse-button-primary-background, 5%) !default;
-$inverse-button-primary-hover-color:                            $inverse-global-inverse-color !default;
-$inverse-button-primary-active-background:                      darken($inverse-button-primary-background, 10%) !default;
-$inverse-button-primary-active-color:                           $inverse-global-inverse-color !default;
-$inverse-button-secondary-background:                           $inverse-global-primary-background !default;
-$inverse-button-secondary-color:                                $inverse-global-inverse-color !default;
-$inverse-button-secondary-hover-background:                     darken($inverse-button-secondary-background, 5%) !default;
-$inverse-button-secondary-hover-color:                          $inverse-global-inverse-color !default;
-$inverse-button-secondary-active-background:                    darken($inverse-button-secondary-background, 10%) !default;
-$inverse-button-secondary-active-color:                         $inverse-global-inverse-color !default;
-$inverse-button-tertiary-background:                            $inverse-global-primary-background !default;
-$inverse-button-tertiary-color:                                 $inverse-global-inverse-color !default;
-$inverse-button-tertiary-hover-background:                      darken($inverse-button-tertiary-background, 5%) !default;
-$inverse-button-tertiary-hover-color:                           $inverse-global-inverse-color !default;
-$inverse-button-tertiary-active-background:                     darken($inverse-button-tertiary-background, 10%) !default;
-$inverse-button-tertiary-active-color:                          $inverse-global-inverse-color !default;
-$inverse-button-danger-background:                              $button-danger-background !default;
-$inverse-button-danger-color:                                   $button-danger-color !default;
-$inverse-button-danger-hover-background:                        $button-danger-hover-background !default;
-$inverse-button-danger-hover-color:                             $button-danger-hover-color !default;
-$inverse-button-danger-active-background:                       $button-danger-active-background !default;
-$inverse-button-danger-active-color:                            $button-danger-active-color !default;
-$inverse-button-text-color:                                     $inverse-global-emphasis-color !default;
-$inverse-button-text-hover-color:                               $inverse-global-muted-color !default;
-$inverse-button-text-disabled-color:                            $inverse-global-muted-color !default;
-$inverse-button-link-color:                                     $inverse-global-emphasis-color !default;
-$inverse-button-link-hover-color:                               $inverse-global-color !default;
-
-
-// Card
-// ========================================================================
-
-$card-body-padding-horizontal:                                  $global-gutter !default;
-$card-body-padding-vertical:                                    $global-gutter !default;
-$card-body-padding-horizontal-l:                                $global-medium-gutter !default;
-$card-body-padding-vertical-l:                                  $global-medium-gutter !default;
-$card-header-padding-horizontal:                                $global-gutter !default;
-$card-header-padding-vertical:                                  round(($global-gutter * 0.5)) !default;
-$card-header-padding-horizontal-l:                              $global-medium-gutter !default;
-$card-header-padding-vertical-l:                                round(($global-medium-gutter * 0.5)) !default;
-$card-footer-padding-horizontal:                                $global-gutter !default;
-$card-footer-padding-vertical:                                  round(($global-gutter * 0.5)) !default;
-$card-footer-padding-horizontal-l:                              $global-medium-gutter !default;
-$card-footer-padding-vertical-l:                                round(($global-medium-gutter * 0.5)) !default;
-$card-title-font-size:                                          $global-large-font-size !default;
-$card-title-line-height:                                        1.4 !default;
-$card-badge-top:                                                $global-small-gutter !default;
-$card-badge-right:                                              $card-badge-top !default;
-$card-badge-height:                                             $badge-size !default;
-$card-badge-padding-horizontal:                                 $badge-padding-horizontal !default;
-$card-badge-background:                                         $badge-background !default;
-$card-badge-color:                                              $badge-color !default;
-$card-badge-font-size:                                          $badge-font-size !default;
-$card-hover-background:                                         $global-muted-background !default;
-$card-default-background:                                       $global-muted-background !default;
-$card-default-color:                                            $global-color !default;
-$card-default-title-color:                                      $global-emphasis-color !default;
-$card-default-hover-background:                                 darken($card-default-background, 5%) !default;
-$card-default-color-mode:                                       dark !default;
-$card-primary-background:                                       $global-primary-background !default;
-$card-primary-color:                                            $global-inverse-color !default;
-$card-primary-title-color:                                      $card-primary-color !default;
-$card-primary-hover-background:                                 darken($card-primary-background, 5%) !default;
-$card-primary-color-mode:                                       light !default;
-$card-secondary-background:                                     $global-secondary-background !default;
-$card-secondary-color:                                          $global-inverse-color !default;
-$card-secondary-title-color:                                    $card-secondary-color !default;
-$card-secondary-hover-background:                               darken($card-secondary-background, 5%) !default;
-$card-secondary-color-mode:                                     light !default;
-$card-tertiary-background:                                      $global-tertiary-background !default;
-$card-tertiary-color:                                           $global-inverse-color !default;
-$card-tertiary-title-color:                                     $card-tertiary-color !default;
-$card-tertiary-hover-background:                                darken($card-tertiary-background, 5%) !default;
-$card-tertiary-color-mode:                                      light !default;
-$card-small-body-padding-horizontal:                            $global-margin !default;
-$card-small-body-padding-vertical:                              $global-margin !default;
-$card-small-header-padding-horizontal:                          $global-margin !default;
-$card-small-header-padding-vertical:                            round(($global-margin * 0.6667)) !default;
-$card-small-footer-padding-horizontal:                          $global-margin !default;
-$card-small-footer-padding-vertical:                            round(($global-margin * 0.6667)) !default;
-$card-large-body-padding-horizontal-l:                          $global-large-gutter !default;
-$card-large-body-padding-vertical-l:                            $global-large-gutter !default;
-$card-large-header-padding-horizontal-l:                        $global-large-gutter !default;
-$card-large-header-padding-vertical-l:                          round(($global-large-gutter * 0.5)) !default;
-$card-large-footer-padding-horizontal-l:                        $global-large-gutter !default;
-$card-large-footer-padding-vertical-l:                          round(($global-large-gutter * 0.5)) !default;
-
-// Inverse
-$inverse-card-badge-background:                                 $inverse-global-primary-background !default;
-$inverse-card-badge-color:                                      $inverse-global-inverse-color !default;
-
-
-// Close
-// ========================================================================
-
-$close-color:                                                   $global-muted-color !default;
-$close-hover-color:                                             $global-color !default;
-
-// Inverse
-$inverse-close-color:                                           $inverse-global-muted-color !default;
-$inverse-close-hover-color:                                     $inverse-global-color !default;
-
-
-// Column
-// ========================================================================
-
-$column-gutter:                                                 $global-gutter !default;
-$column-gutter-l:                                               $global-medium-gutter !default;
-$column-divider-rule-color:                                     $global-border !default;
-$column-divider-rule-width:                                     1px !default;
-
-// Inverse
-$inverse-column-divider-rule-color:                             $inverse-global-border !default;
-
-
-// Comment
-// ========================================================================
-
-$comment-header-margin-bottom:                                  $global-margin !default;
-$comment-title-font-size:                                       $global-medium-font-size !default;
-$comment-title-line-height:                                     1.4 !default;
-$comment-meta-font-size:                                        $global-small-font-size !default;
-$comment-meta-line-height:                                      1.4 !default;
-$comment-meta-color:                                            $global-muted-color !default;
-$comment-list-margin-top:                                       $global-large-margin !default;
-$comment-list-padding-left:                                     30px !default;
-$comment-list-padding-left-m:                                   100px !default;
-
-
-// Container
-// ========================================================================
-
-$container-max-width:                                           1200px !default;
-$container-xsmall-max-width:                                    750px !default;
-$container-small-max-width:                                     900px !default;
-$container-large-max-width:                                     1400px !default;
-$container-xlarge-max-width:                                    1600px !default;
-$container-padding-horizontal:                                  15px !default;
-$container-padding-horizontal-s:                                $global-gutter !default;
-$container-padding-horizontal-m:                                $global-medium-gutter !default;
-
-
-// Form
-// ========================================================================
-
-$form-height:                                                   $global-control-height !default;
-$form-line-height:                                              $form-height !default;
-$form-padding-horizontal:                                       10px !default;
-$form-padding-vertical:                                         round($form-padding-horizontal * 0.4) !default;
-$form-background:                                               darken($global-muted-background, 1%) !default;
-$form-color:                                                    $global-color !default;
-$form-focus-background:                                         darken($global-muted-background, 2%) !default;
-$form-focus-color:                                              $global-color !default;
-$form-disabled-background:                                      darken($global-muted-background, 3%) !default;
-$form-disabled-color:                                           $global-color !default;
-$form-placeholder-color:                                        $global-muted-color !default;
-$form-small-height:                                             $global-control-small-height !default;
-$form-small-padding-horizontal:                                 8px !default;
-$form-small-padding-vertical:                                   round($form-small-padding-horizontal * 0.4) !default;
-$form-small-line-height:                                        $form-small-height !default;
-$form-small-font-size:                                          $global-small-font-size !default;
-$form-medium-height:                                            $global-control-medium-height !default;
-$form-medium-padding-horizontal:                                15px !default;
-$form-medium-padding-vertical:                                  round($form-medium-padding-horizontal * 0.4) !default;
-$form-medium-line-height:                                       $form-medium-height !default;
-$form-medium-font-size:                                         $global-font-size !default;
-$form-large-height:                                             $global-control-large-height !default;
-$form-large-padding-horizontal:                                 12px !default;
-$form-large-padding-vertical:                                   round($form-large-padding-horizontal * 0.3) !default;
-$form-large-line-height:                                        $form-large-height !default;
-$form-large-font-size:                                          $global-medium-font-size !default;
-$form-success-color:                                            $global-success-background !default;
-$form-warning-color:                                            $global-warning-background !default;
-$form-danger-color:                                             $global-danger-background !default;
-$form-width-xsmall:                                             50px !default;
-$form-width-small:                                              130px !default;
-$form-width-medium:                                             260px !default;
-$form-width-large:                                              500px !default;
-$form-datalist-padding-right:                                   20px !default;
-$form-datalist-icon-color:                                      $global-color !default;
-$form-legend-font-size:                                         $global-large-font-size !default;
-$form-legend-line-height:                                       1.4 !default;
-$form-label-color:                                              $global-inverse-color !default;
-$form-label-font-size:                                          $global-font-size !default;
-$form-stacked-margin-bottom:                                    $global-small-margin !default;
-$form-horizontal-label-width:                                   200px !default;
-$form-horizontal-label-margin-top:                              7px !default;
-$form-horizontal-controls-margin-left:                          215px !default;
-$form-horizontal-controls-text-padding-top:                     7px !default;
-$form-icon-width:                                               $form-height !default;
-$form-icon-color:                                               $global-muted-color !default;
-$form-icon-hover-color:                                         $global-color !default;
-$form-icon-datalist-image-path:                                 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
-
-// Inverse
-$inverse-form-background:                                       $inverse-global-muted-background !default;
-$inverse-form-color:                                            $inverse-global-color !default;
-$inverse-form-focus-background:                                 $inverse-global-muted-background !default;
-$inverse-form-focus-color:                                      $inverse-global-color !default;
-$inverse-form-placeholder-color:                                $inverse-global-muted-color !default;
-$inverse-form-datalist-icon-color:                              $inverse-global-color !default;
-$inverse-form-icon-color:                                       $inverse-global-muted-color !default;
-$inverse-form-icon-hover-color:                                 $inverse-global-color !default;
-$inverse-form-label-color:                                      $inverse-global-emphasis-color !default;
-
-
-// Control
-// ========================================================================
-
-$control-height:                                                $form-height !default;
-$control-line-height:                                           $control-height !default;
-$control-padding-horizontal:                                    10px !default;
-$control-padding-vertical:                                      round($control-padding-horizontal * 0.4) !default;
-$control-background:                                            darken($global-muted-background, 1%) !default;
-$control-color:                                                 $global-color !default;
-$control-border:                                                $global-border !default;
-$control-border-style:                                          $global-border-style !default;
-$control-border-width:                                          $global-border-width !default;
-$control-border-radius:                                         0 !default;
-$control-hover-background:                                      darken($global-muted-background, 2%) !default;
-$control-hover-border:                                          darken($control-border, 4%) !default;
-$control-hover-color:                                           $global-color !default;
-$control-focus-background:                                      darken($global-muted-background, 2%) !default;
-$control-focus-border:                                          $global-primary-border !default;
-$control-focus-color:                                           $global-color !default;
-$control-disabled-background:                                   darken($global-muted-background, 3%) !default;
-$control-disabled-border:                                       $control-border !default;
-$control-disabled-color:                                        $global-color !default;
-$control-placeholder-color:                                     $global-muted-color !default;
-$control-small-height:                                          $global-control-small-height !default;
-$control-small-padding-horizontal:                              8px !default;
-$control-small-padding-vertical:                                round($control-small-padding-horizontal * 0.4) !default;
-$control-small-line-height:                                     $control-small-height !default;
-$control-small-font-size:                                       $global-small-font-size !default;
-$control-medium-height:                                         $global-control-medium-height !default;
-$control-medium-padding-horizontal:                             15px !default;
-$control-medium-padding-vertical:                               round($control-medium-padding-horizontal * 0.4) !default;
-$control-medium-line-height:                                    $control-medium-height !default;
-$control-medium-font-size:                                      $global-font-size !default;
-$control-large-height:                                          $global-control-large-height !default;
-$control-large-padding-horizontal:                              12px !default;
-$control-large-padding-vertical:                                round($control-large-padding-horizontal * 0.3) !default;
-$control-large-line-height:                                     $control-large-height !default;
-$control-large-font-size:                                       $global-medium-font-size !default;
-$control-success-border:                                        $global-success-background !default;
-$control-success-color:                                         $global-success-background !default;
-$control-warning-border:                                        $global-warning-background !default;
-$control-warning-color:                                         $global-warning-background !default;
-$control-danger-border:                                         $global-danger-background !default;
-$control-danger-color:                                          $global-danger-background !default;
-$control-blank-border-style:                                    dashed !default;
-$control-blank-focus-border:                                    darken($global-muted-background, 5%) !default;
-$control-affix-margin:                                          $global-small-margin !default;
-$control-icon-color:                                            $global-muted-color !default;
-$control-icon-hover-color:                                      $global-color !default;
-
-// Inverse
-$inverse-control-background:                                    darken($inverse-global-muted-background, 60%) !default;
-$inverse-control-border:                                        $inverse-global-border !default;
-$inverse-control-color:                                         $inverse-global-color !default;
-$inverse-control-hover-background:                              darken($inverse-global-muted-background, 70%) !default;
-$inverse-control-hover-border:                                  darken($inverse-control-border, 4%) !default;
-$inverse-control-hover-color:                                   $inverse-global-color !default;
-$inverse-control-focus-background:                              darken($inverse-global-muted-background, 70%) !default;
-$inverse-control-focus-color:                                   $inverse-global-color !default;
-$inverse-control-focus-border:                                  $inverse-control-hover-border !default;
-$inverse-control-placeholder-color:                             $inverse-global-muted-color !default;
-$inverse-control-icon-color:                                    $inverse-global-muted-color !default;
-$inverse-control-icon-hover-color:                              $inverse-global-color !default;
-
-
-// Checkbox
-// ========================================================================
-
-$checkbox-size:                                                 20px !default;
-$checkbox-background:                                           $control-background !default;
-$checkbox-border-width:                                         $control-border-width !default;
-$checkbox-border:                                               $control-border !default;
-$checkbox-border-radius:                                        $control-border-radius !default;
-$checkbox-hover-border:                                         $global-primary-border !default;
-$checkbox-focus-background:                                     $control-focus-background !default;
-$checkbox-focus-border:                                         $global-primary-border !default;
-$checkbox-checked-background:                                   $global-primary-background !default;
-$checkbox-checked-border:                                       $global-primary-border !default;
-$checkbox-checked-icon-color:                                   $global-inverse-color !default;
-$checkbox-control-background:                                   rgba($control-background, 45%) !default;
-$checkbox-checked-control-background:                           rgba($checkbox-checked-background, 15%) !default;
-$checkbox-checked-control-color:                                $global-primary-background !default;
-$checkbox-checked-control-padding:                              10px !default;
-$checkbox-disabled-background:                                  $control-disabled-background !default;
-$checkbox-disabled-border:                                      $control-disabled-border !default;
-$checkbox-disabled-icon-color:                                  $global-muted-color !default;
-$checkbox-checked-icon-border-width:                            2px !default;
-$checkbox-indeterminate-size:                                   $checkbox-size - 10px !default;
-
-
-// Countdown
-// ========================================================================
-
-$countdown-number-line-height:                                  0.8 !default;
-$countdown-number-font-size:                                    2rem !default; // 32px
-$countdown-number-font-size-s:                                  4rem !default; // 64px
-$countdown-number-font-size-m:                                  6rem !default; // 96px
-
-$countdown-separator-line-height:                               1.6 !default;
-$countdown-separator-font-size:                                 1rem !default; // 16px
-$countdown-separator-font-size-s:                               2rem !default; // 32px
-$countdown-separator-font-size-m:                               3rem !default; // 48px
-
-
-// DatePicker
-// ========================================================================
-
-$datepicker-border:                                             $control-border !default;
-$datepicker-border-style:                                       $control-border-style !default;
-$datepicker-border-width:                                       $control-border-width !default;
-$datepicker-height:                                             $control-height - $datepicker-border-width * 2 !default;
-$datepicker-small-height:                                       $control-small-height - $datepicker-border-width * 2 !default;
-$datepicker-medium-height:                                      $control-medium-height - $datepicker-border-width * 2 !default;
-$datepicker-large-height:                                       $control-large-height - $datepicker-border-width * 2 !default;
-$datepicker-success-border:                                     $control-success-border !default;
-$datepicker-success-color:                                      $control-success-color !default;
-$datepicker-warning-border:                                     $control-warning-border !default;
-$datepicker-warning-color:                                      $control-warning-color !default;
-$datepicker-danger-border:                                      $control-danger-border !default;
-$datepicker-danger-color:                                       $control-danger-color !default;
-$datepicker-blank-border-style:                                 $control-blank-border-style !default;
-$datepicker-blank-focus-border:                                 $control-blank-focus-border !default;
-$datepicker-button-font-size:                                   $global-font-size !default;
-$datepicker-button-line-height:                                 $global-control-large-height !default;
-$datepicker-button-padding-horizontal:                          $global-small-gutter !default;
-$datepicker-body-padding-vertical:                              $global-small-gutter !default;
-$datepicker-body-padding-horizontal:                            $global-gutter !default;
-$datepicker-cell-border-radius:                                 $global-small-border-radius !default;
-$datepicker-cell-height:                                        $global-control-height !default;
-$datepicker-cell-width:                                         $global-control-height * 1.05 !default;
-$datepicker-cell-padding:                                       $global-xsmall-gutter !default;
-$datepicker-cell-color:                                         $global-color !default;
-$datepicker-cell-hover-background:                              $global-secondary-background !default;
-$datepicker-cell-active-background:                             $global-primary-background !default;
-$datepicker-cell-active-color:                                  $global-inverse-color !default;
-$datepicker-cell-disabled-background:                           $global-muted-background !default;
-$datepicker-cell-disabled-color:                                $global-muted-color !default;
-$datepicker-time-column-height:                                 252px !default;
-$datepicker-time-column-width:                                  60px !default;
-$datepicker-time-cell-height:                                   28px !default;
-$datepicker-dropdown-background:                                $global-muted-background !default;
-$datepicker-dropdown-border:                                    $global-border !default;
-$datepicker-dropdown-border-style:                              $global-border-style !default;
-$datepicker-dropdown-border-width:                              $global-border-width !default;
-$datepicker-dropdown-border-radius:                             $global-border-radius !default;
-
-
-// Description list
-// ========================================================================
-
-$description-list-term-color:                                   $global-emphasis-color !default;
-$description-list-term-margin-top:                              $global-margin !default;
-$description-list-term-font-size:                               $global-small-font-size !default;
-$description-list-term-font-weight:                             500 !default;
-$description-list-term-text-transform:                          uppercase !default;
-$description-list-divider-term-margin-top:                      $global-margin !default;
-$description-list-divider-term-border-width:                    $global-border-width !default;
-$description-list-divider-term-border:                          $global-border !default;
-$inverse-description-list-term-color:                           $inverse-global-emphasis-color !default;
-
-
-// Divider
-// ========================================================================
-
-$divider-margin-vertical:                                       $global-margin !default;
-$divider-icon-width:                                            50px !default;
-$divider-icon-height:                                           20px !default;
-$divider-icon-color:                                            $global-border !default;
-$divider-icon-line-top:                                         50% !default;
-$divider-icon-line-width:                                       100% !default;
-$divider-icon-line-border-width:                                $global-border-width !default;
-$divider-icon-line-border:                                      $global-border !default;
-$divider-small-width:                                           100px !default;
-$divider-small-border-width:                                    $global-border-width !default;
-$divider-small-border:                                          $global-border !default;
-$divider-vertical-height:                                       100px !default;
-$divider-vertical-border-width:                                 $global-border-width !default;
-$divider-vertical-border:                                       $global-border !default;
-$internal-divider-icon-image:                                   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
-
-// Inverse
-$inverse-divider-icon-color:                                    $inverse-global-border !default;
-$inverse-divider-icon-line-border:                              $inverse-global-border !default;
-$inverse-divider-small-border:                                  $inverse-global-border !default;
-$inverse-divider-vertical-border:                               $inverse-global-border !default;
-
-
-// Dotnav
-// ========================================================================
-
-$dotnav-margin-horizontal:                                      12px !default;
-$dotnav-margin-vertical:                                        $dotnav-margin-horizontal !default;
-$dotnav-item-width:                                             10px !default;
-$dotnav-item-height:                                            $dotnav-item-width !default;
-$dotnav-item-border-radius:                                     50% !default;
-$dotnav-item-background:                                        rgba($global-color, 20%) !default;
-$dotnav-item-hover-background:                                  rgba($global-color, 60%) !default;
-$dotnav-item-onclick-background:                                rgba($global-color, 20%) !default;
-$dotnav-item-active-background:                                 rgba($global-color, 60%) !default;
-
-// Inverse
-$inverse-dotnav-item-background:                                rgba($inverse-global-color, 50%) !default;
-$inverse-dotnav-item-hover-background:                          rgba($inverse-global-color, 90%) !default;
-$inverse-dotnav-item-onclick-background:                        rgba($inverse-global-color, 50%) !default;
-$inverse-dotnav-item-active-background:                         rgba($inverse-global-color, 90%) !default;
-
-
-// Drawer
-// ========================================================================
-
-$drawer-content-background:                                     $global-background !default;
-$drawer-content-padding:                                        $global-gutter !default;
-$drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
-$drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
-$drawer-z-index:                                                $global-z-index + 30 !default;
-$drawer-transition-duration:                                    $transition-medium-fast-duration !default;
-$drawer-close-position:                                         $global-small-margin !default;
-$drawer-close-padding:                                          5px !default;
-
-
-// Drop
-// ========================================================================
-
-$drop-z-index:                                                  $global-z-index + 20 !default;
-$drop-width:                                                    300px !default;
-$drop-margin:                                                   $global-margin !default;
-
-
-// Dropdown
-// ========================================================================
-
-$dropdown-color-mode:                                           light !default;
-$dropdown-z-index:                                              $global-z-index + 20 !default;
-$dropdown-min-width:                                            200px !default;
-$dropdown-padding:                                              15px !default;
-$dropdown-background:                                           $global-muted-background !default;
-$dropdown-border-radius:                                        $global-border-radius !default;
-$dropdown-color:                                                $global-color !default;
-$dropdown-margin:                                               $global-small-margin !default;
-$dropdown-nav-item-color:                                       $global-muted-color !default;
-$dropdown-nav-item-hover-color:                                 $global-color !default;
-$dropdown-nav-header-color:                                     $global-emphasis-color !default;
-$dropdown-nav-divider-border-width:                             $global-border-width !default;
-$dropdown-nav-divider-border:                                   $global-border !default;
-$dropdown-nav-sublist-item-color:                               $global-muted-color !default;
-$dropdown-nav-sublist-item-hover-color:                         $global-color !default;
-
-// Inverse
-$inverse-dropdown-background:                                   $inverse-global-muted-background !default;
-$inverse-dropdown-color:                                        $inverse-global-color !default;
-$inverse-dropdown-nav-item-color:                               $inverse-global-muted-color !default;
-$inverse-dropdown-nav-item-hover-color:                         $inverse-global-color !default;
-$inverse-dropdown-nav-header-color:                             $inverse-global-emphasis-color !default;
-$inverse-dropdown-nav-divider-border:                           $inverse-global-border !default;
-$inverse-dropdown-nav-sublist-item-color:                       $inverse-global-muted-color !default;
-$inverse-dropdown-nav-sublist-item-hover-color:                 $inverse-global-color !default;
-
-
-// Grid
-// ========================================================================
-
-$grid-gutter-horizontal:                                        $global-gutter !default;
-$grid-gutter-vertical:                                          $grid-gutter-horizontal !default;
-$grid-gutter-horizontal-s:                                      $global-small-gutter !default;
-$grid-gutter-vertical-s:                                        $grid-gutter-horizontal-s !default;
-$grid-gutter-horizontal-m:                                      $global-medium-gutter !default;
-$grid-gutter-vertical-m:                                        $grid-gutter-horizontal-m !default;
-$grid-gutter-horizontal-l:                                      $global-large-gutter !default;
-$grid-gutter-vertical-l:                                        $grid-gutter-horizontal-l !default;
-$grid-xsmall-gutter-horizontal:                                 $global-xsmall-gutter !default;
-$grid-xsmall-gutter-vertical:                                   $grid-xsmall-gutter-horizontal !default;
-$grid-small-gutter-horizontal:                                  $global-small-gutter !default;
-$grid-small-gutter-vertical:                                    $grid-small-gutter-horizontal !default;
-$grid-medium-gutter-horizontal:                                 $global-medium-gutter !default;
-$grid-medium-gutter-vertical:                                   $grid-medium-gutter-horizontal !default;
-$grid-large-gutter-horizontal:                                  $global-large-gutter !default;
-$grid-large-gutter-vertical:                                    $grid-large-gutter-horizontal !default;
-$grid-large-gutter-horizontal-l:                                $global-xlarge-gutter !default;
-$grid-large-gutter-vertical-l:                                  $grid-large-gutter-horizontal-l !default;
-$grid-divider-border-width:                                     $global-border-width !default;
-$grid-divider-border:                                           $global-border !default;
-
-// Inverse
-$inverse-grid-divider-border:                                   $inverse-global-border !default;
-
-
-// Heading
-// ========================================================================
-
-$heading-medium-font-size-l:                                    4rem !default;                                   // 64px
-$heading-large-font-size-l:                                     6rem !default;                                   // 96px
-$heading-xlarge-font-size-l:                                    8rem !default;                                   // 128px
-$heading-2xlarge-font-size-l:                                   11rem !default;                                  // 176px
-
-$heading-small-font-size-m:                                     $heading-medium-font-size-l * 0.8125 !default;   // 3.25rem / 52px
-$heading-medium-font-size-m:                                    $heading-medium-font-size-l * 0.875 !default;    // 3.5rem / 56px
-$heading-large-font-size-m:                                     $heading-medium-font-size-l !default;            // 4rem / 64px
-$heading-xlarge-font-size-m:                                    $heading-large-font-size-l !default;             // 6rem / 96px
-$heading-2xlarge-font-size-m:                                   $heading-xlarge-font-size-l !default;            // 8rem / 128px
-
-$heading-small-font-size:                                       $heading-small-font-size-m * 0.8 !default;       // 38px 0.73
-$heading-medium-font-size:                                      $heading-medium-font-size-m * 0.825 !default;    // 40px 0.714
-$heading-large-font-size:                                       $heading-large-font-size-m * 0.85 !default;      // 50px 0.78
-$heading-xlarge-font-size:                                      $heading-large-font-size-m !default;             // 4rem / 64px
-$heading-2xlarge-font-size:                                     $heading-xlarge-font-size-m !default;            // 6rem / 96px
-
-$heading-small-line-height:                                     1.2 !default;
-$heading-medium-line-height:                                    1.1 !default;
-$heading-large-line-height:                                     1.1 !default;
-$heading-xlarge-line-height:                                    1 !default;
-$heading-2xlarge-line-height:                                   1 !default;
-$heading-divider-padding-bottom:                                calc(5px + 0.1em) !default;
-$heading-divider-border-width:                                  calc(0.2px + 0.05em) !default;
-$heading-divider-border:                                        $global-border !default;
-$heading-bullet-top:                                            calc(-0.1 * 1em) !default;
-$heading-bullet-height:                                         calc(4px + 0.7em) !default;
-$heading-bullet-margin-right:                                   calc(5px + 0.2em) !default;
-$heading-bullet-border-width:                                   calc(5px + 0.1em) !default;
-$heading-bullet-border:                                         $global-border !default;
-$heading-line-border:                                           $global-border !default;
-$heading-line-border-width:                                     calc(0.2px + 0.05em) !default;
-$heading-line-top:                                              50% !default;
-$heading-line-height:                                           $heading-line-border-width !default;
-$heading-line-width:                                            2000px !default;
-$heading-line-margin-horizontal:                                calc(5px + 0.3em) !default;
-
-// Inverse
-$inverse-heading-divider-border:                                $inverse-global-border !default;
-$inverse-heading-bullet-border:                                 $inverse-global-border !default;
-$inverse-heading-line-border:                                   $inverse-global-border !default;
-
-
-// Height
-// ========================================================================
-
-$height-small-height:                                           150px !default;
-$height-medium-height:                                          300px !default;
-$height-large-height:                                           450px !default;
-$height-xlarge-height:                                          600px !default;
-
-
-// Icon
-// ========================================================================
-
-$icon-image-size:                                               20px !default;
-$icon-link-color:                                               $global-muted-color !default;
-$icon-link-hover-color:                                         $global-color !default;
-$icon-link-active-color:                                        darken($global-color, 5%) !default;
-$icon-button-size:                                              36px !default;
-$icon-button-border-radius:                                     500px !default;
-$icon-button-background:                                        $global-muted-background !default;
-$icon-button-color:                                             $global-muted-color !default;
-$icon-button-hover-background:                                  darken($icon-button-background, 5%) !default;
-$icon-button-hover-color:                                       $global-color !default;
-$icon-button-active-background:                                 darken($icon-button-background, 10%) !default;
-$icon-button-active-color:                                      $global-color !default;
-
-// Inverse
-$inverse-icon-link-color:                                       $inverse-global-muted-color !default;
-$inverse-icon-link-hover-color:                                 $inverse-global-color !default;
-$inverse-icon-link-active-color:                                $inverse-global-color !default;
-$inverse-icon-button-background:                                $inverse-global-muted-background !default;
-$inverse-icon-button-color:                                     $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background:                          darken($inverse-icon-button-background, 5%) !default;
-$inverse-icon-button-hover-color:                               $inverse-global-color !default;
-$inverse-icon-button-active-background:                         darken($inverse-icon-button-background, 10%) !default;
-$inverse-icon-button-active-color:                              $inverse-global-color !default;
-
-
-// Iconnav
-// ========================================================================
-
-$iconnav-margin-horizontal:                                     $global-small-margin !default;
-$iconnav-margin-vertical:                                       $iconnav-margin-horizontal !default;
-$iconnav-item-color:                                            $global-muted-color !default;
-$iconnav-item-hover-color:                                      $global-color !default;
-$iconnav-item-active-color:                                     $global-color !default;
-
-// Inverse
-$inverse-iconnav-item-color:                                    $inverse-global-muted-color !default;
-$inverse-iconnav-item-hover-color:                              $inverse-global-color !default;
-$inverse-iconnav-item-active-color:                             $inverse-global-color !default;
-
-
-// Label
-// ========================================================================
-
-$label-padding-vertical:                                        0 !default;
-$label-padding-horizontal:                                      $global-small-margin !default;
-$label-background:                                              $global-primary-background !default;
-$label-border-radius:                                           0 !default;
-$label-line-height:                                             $global-line-height !default;
-$label-font-size:                                               $global-small-font-size !default;
-$label-large-padding-vertical:                                  $global-xsmall-margin !default;
-$label-large-padding-horizontal:                                $global-margin !default;
-$label-large-line-height:                                       $global-line-height !default;
-$label-large-font-size:                                         $global-font-size !default;
-$label-color:                                                   $global-inverse-color !default;
-$label-success-background:                                      $global-success-background !default;
-$label-success-color:                                           $global-inverse-color !default;
-$label-warning-background:                                      $global-warning-background !default;
-$label-warning-color:                                           $global-inverse-color !default;
-$label-danger-background:                                       $global-danger-background !default;
-$label-danger-color:                                            $global-inverse-color !default;
-
-// Inverse
-$inverse-label-background:                                      $inverse-global-primary-background !default;
-$inverse-label-color:                                           $inverse-global-inverse-color !default;
-
-
-// Leader
-// ========================================================================
-
-$leader-fill-content:                                           '.' !default;
-$leader-fill-margin-left:                                       $global-small-gutter !default;
-
-
-// Lightbox
-// ========================================================================
-
-$lightbox-z-index:                                              $global-z-index + 10 !default;
-$lightbox-background:                                           #000 !default;
-$lightbox-item-color:                                           rgb(255 255 255 / 70%) !default;
-$lightbox-item-max-width:                                       100vw !default;
-$lightbox-item-max-height:                                      100vh !default;
-$lightbox-toolbar-padding-vertical:                             10px !default;
-$lightbox-toolbar-padding-horizontal:                           10px !default;
-$lightbox-toolbar-background:                                   rgb(0 0 0 / 30%) !default;
-$lightbox-toolbar-color:                                        rgb(255 255 255 / 70%) !default;
-$lightbox-toolbar-icon-padding:                                 5px !default;
-$lightbox-toolbar-icon-color:                                   rgb(255 255 255 / 70%) !default;
-$lightbox-toolbar-icon-hover-color:                             #fff !default;
-$lightbox-button-size:                                          50px !default;
-$lightbox-button-background:                                    $lightbox-toolbar-background !default;
-$lightbox-button-color:                                         rgb(255 255 255 / 70%) !default;
-$lightbox-button-hover-color:                                   #fff !default;
-
-
-// Link
-// ========================================================================
-
-$link-muted-color:                                              $global-muted-color !default;
-$link-muted-hover-color:                                        $global-color !default;
-$link-text-hover-color:                                         $global-muted-color !default;
-$link-heading-hover-color:                                      $global-primary-background !default;
-$link-heading-hover-text-decoration:                            none !default;
-
-// Inverse
-$inverse-link-muted-color:                                      $inverse-global-muted-color !default;
-$inverse-link-muted-hover-color:                                $inverse-global-color !default;
-$inverse-link-text-hover-color:                                 $inverse-global-muted-color !default;
-$inverse-link-heading-hover-color:                              $inverse-global-primary-background !default;
-
-
-// List
-// ========================================================================
-
-$list-margin-top:                                               $global-small-margin !default;
-$list-padding-left:                                             30px !default;
-$list-marker-height:                                            ($global-line-height * 1em) !default;
-$list-muted-color:                                              $global-muted-color !default;
-$list-emphasis-color:                                           $global-emphasis-color !default;
-$list-primary-color:                                            $global-primary-background !default;
-$list-secondary-color:                                          $global-secondary-background !default;
-$list-bullet-icon-color:                                        $global-color !default;
-$list-divider-margin-top:                                       $global-small-margin !default;
-$list-divider-border-width:                                     $global-border-width !default;
-$list-divider-border:                                           $global-border !default;
-$list-striped-padding-vertical:                                 $global-small-margin !default;
-$list-striped-padding-horizontal:                               $global-small-margin !default;
-$list-striped-background:                                       $global-muted-background !default;
-$list-large-margin-top:                                         $global-margin !default;
-$list-large-divider-margin-top:                                 $global-margin !default;
-$list-large-striped-padding-vertical:                           $global-margin !default;
-$list-large-striped-padding-horizontal:                         $global-small-margin !default;
-$list-bullet-icon-image-path:                                   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E' !default;
-
-// Inverse
-$inverse-list-muted-color:                                      $inverse-global-muted-color !default;
-$inverse-list-emphasis-color:                                   $inverse-global-emphasis-color !default;
-$inverse-list-primary-color:                                    $inverse-global-primary-background !default;
-$inverse-list-secondary-color:                                  $inverse-global-primary-background !default;
-$inverse-list-divider-border:                                   $inverse-global-border !default;
-$inverse-list-striped-background:                               $inverse-global-muted-background !default;
-$inverse-list-bullet-icon-color:                                $inverse-global-color !default;
-
-
-// Margin
-// ========================================================================
-
-$margin-margin:                                                 $global-margin !default;
-$margin-xsmall-margin:                                          $global-xsmall-margin !default;
-$margin-small-margin:                                           $global-small-margin !default;
-$margin-medium-margin:                                          $global-medium-margin !default;
-$margin-large-margin:                                           $global-medium-margin !default;
-$margin-large-margin-l:                                         $global-large-margin !default;
-$margin-xlarge-margin:                                          $global-large-margin !default;
-$margin-xlarge-margin-l:                                        $global-xlarge-margin !default;
-
-
-// Marker
-// ========================================================================
-
-$marker-padding:                                                 5px !default;
-$marker-background:                                              $global-secondary-background !default;
-$marker-color:                                                   $global-inverse-color !default;
-$marker-hover-color:                                             $global-inverse-color !default;
-
-// Inverse
-$inverse-marker-background:                                     $global-muted-background !default;
-$inverse-marker-color:                                          $global-color !default;
-$inverse-marker-hover-color:                                    $global-color !default;
-
-
-// Modal
-// ========================================================================
-
-$modal-z-index:                                                 $global-z-index + 10 !default;
-$modal-mask-background:                                         rgb(0 0 0 / 30%) !default;
-$modal-padding-horizontal:                                      15px !default;
-$modal-padding-horizontal-s:                                    $global-gutter !default;
-$modal-padding-horizontal-m:                                    $global-medium-gutter !default;
-$modal-padding-vertical:                                        $modal-padding-horizontal !default;
-$modal-padding-vertical-s:                                      50px !default;
-$modal-width:                                                   600px !default;
-$modal-content-background:                                      $global-background !default;
-$modal-container-width:                                         1200px !default;
-$modal-body-padding-horizontal:                                 $global-gutter !default;
-$modal-body-padding-vertical:                                   $global-gutter !default;
-$modal-header-padding-horizontal:                               $global-gutter !default;
-$modal-header-padding-vertical:                                 ($modal-header-padding-horizontal * 0.5) !default;
-$modal-header-background:                                       $global-muted-background !default;
-$modal-footer-padding-horizontal:                               $global-gutter !default;
-$modal-footer-padding-vertical:                                 ($modal-footer-padding-horizontal * 0.5) !default;
-$modal-footer-background:                                       $global-muted-background !default;
-$modal-title-font-size:                                         $global-xlarge-font-size !default;
-$modal-title-line-height:                                       1.3 !default;
-$modal-close-position:                                          $global-small-margin !default;
-$modal-close-padding:                                           5px !default;
-$modal-close-outside-position:                                  0 !default;
-$modal-close-outside-translate:                                 100% !default;
-$modal-close-outside-color:                                     lighten($global-inverse-color, 20%) !default;
-$modal-close-outside-hover-color:                               $global-inverse-color !default;
-
-
-// Nav
-// ========================================================================
-
-$nav-item-padding-vertical:                                     5px !default;
-$nav-item-padding-horizontal:                                   0 !default;
-$nav-sublist-padding-vertical:                                  5px !default;
-$nav-sublist-padding-left:                                      15px !default;
-$nav-sublist-deeper-padding-left:                               15px !default;
-$nav-sublist-item-padding-vertical:                             2px !default;
-$nav-parent-icon-width:                                         ($global-line-height * 1em) !default;
-$nav-parent-icon-height:                                        $nav-parent-icon-width !default;
-$nav-parent-icon-color:                                         $global-color !default;
-$nav-header-padding-vertical:                                   $nav-item-padding-vertical !default;
-$nav-header-padding-horizontal:                                 $nav-item-padding-horizontal !default;
-$nav-header-font-size:                                          $global-small-font-size !default;
-$nav-header-text-transform:                                     uppercase !default;
-$nav-header-margin-top:                                         $global-margin !default;
-$nav-divider-border-width:                                      $global-border-width !default;
-$nav-divider-border:                                            $global-border !default;
-$nav-divider-margin-vertical:                                   5px !default;
-$nav-divider-margin-horizontal:                                 0 !default;
-$nav-default-item-color:                                        $global-muted-color !default;
-$nav-default-item-hover-color:                                  $global-color !default;
-$nav-default-item-active-color:                                 $global-emphasis-color !default;
-$nav-default-header-color:                                      $global-emphasis-color !default;
-$nav-default-divider-border-width:                              $global-border-width !default;
-$nav-default-divider-border:                                    $global-border !default;
-$nav-default-sublist-item-color:                                $global-muted-color !default;
-$nav-default-sublist-item-hover-color:                          $global-color !default;
-$nav-default-sublist-item-active-color:                         $global-emphasis-color !default;
-$nav-primary-item-font-size:                                    $global-large-font-size !default;
-$nav-primary-item-line-height:                                  $global-line-height !default;
-$nav-primary-item-color:                                        $global-muted-color !default;
-$nav-primary-item-hover-color:                                  $global-color !default;
-$nav-primary-item-active-color:                                 $global-emphasis-color !default;
-$nav-primary-header-color:                                      $global-emphasis-color !default;
-$nav-primary-divider-border-width:                              $global-border-width !default;
-$nav-primary-divider-border:                                    $global-border !default;
-$nav-primary-sublist-item-color:                                $global-muted-color !default;
-$nav-primary-sublist-item-hover-color:                          $global-color !default;
-$nav-primary-sublist-item-active-color:                         $global-emphasis-color !default;
-$nav-dividers-margin-top:                                       0 !default;
-$nav-dividers-border-width:                                     $global-border-width !default;
-$nav-dividers-border:                                           $global-border !default;
-
-// Inverse
-$inverse-nav-parent-icon-color:                                 $inverse-global-color !default;
-$inverse-nav-default-item-color:                                $inverse-global-muted-color !default;
-$inverse-nav-default-item-hover-color:                          $inverse-global-color !default;
-$inverse-nav-default-item-active-color:                         $inverse-global-emphasis-color !default;
-$inverse-nav-default-header-color:                              $inverse-global-emphasis-color !default;
-$inverse-nav-default-divider-border:                            $inverse-global-border !default;
-$inverse-nav-default-sublist-item-color:                        $inverse-global-muted-color !default;
-$inverse-nav-default-sublist-item-hover-color:                  $inverse-global-color !default;
-$inverse-nav-default-sublist-item-active-color:                 $inverse-global-emphasis-color !default;
-$inverse-nav-primary-item-color:                                $inverse-global-muted-color !default;
-$inverse-nav-primary-item-hover-color:                          $inverse-global-color !default;
-$inverse-nav-primary-item-active-color:                         $inverse-global-emphasis-color !default;
-$inverse-nav-primary-header-color:                              $inverse-global-emphasis-color !default;
-$inverse-nav-primary-divider-border:                            $inverse-global-border !default;
-$inverse-nav-primary-sublist-item-color:                        $inverse-global-muted-color !default;
-$inverse-nav-primary-sublist-item-hover-color:                  $inverse-global-color !default;
-$inverse-nav-primary-sublist-item-active-color:                 $inverse-global-emphasis-color !default;
-
-
-// Navbar
-// ========================================================================
-
-$navbar-background:                                             $global-muted-background !default;
-$navbar-color-mode:                                             none !default;
-$navbar-nav-item-height:                                        80px !default;
-$navbar-nav-item-padding-horizontal:                            15px !default;
-$navbar-nav-item-color:                                         $global-muted-color !default;
-$navbar-nav-item-font-size:                                     $global-font-size !default;
-$navbar-nav-item-font-family:                                   $global-font-family !default;
-$navbar-nav-item-hover-color:                                   $global-color !default;
-$navbar-nav-item-onclick-color:                                 $global-emphasis-color !default;
-$navbar-nav-item-active-color:                                  $global-emphasis-color !default;
-$navbar-item-color:                                             $global-color !default;
-$navbar-toggle-color:                                           $global-muted-color !default;
-$navbar-toggle-hover-color:                                     $global-color !default;
-$navbar-subtitle-font-size:                                     $global-small-font-size !default;
-$navbar-dropdown-z-index:                                       $global-z-index + 20 !default;
-$navbar-dropdown-width:                                         200px !default;
-$navbar-dropdown-margin:                                        0 !default;
-$navbar-dropdown-padding:                                       15px !default;
-$navbar-dropdown-background:                                    $global-muted-background !default;
-$navbar-dropdown-color:                                         $global-color !default;
-$navbar-dropdown-grid-gutter-horizontal:                        $global-gutter !default;
-$navbar-dropdown-grid-gutter-vertical:                          $navbar-dropdown-grid-gutter-horizontal !default;
-$navbar-dropdown-dropbar-margin-top:                            0 !default;
-$navbar-dropdown-dropbar-margin-bottom:                         $navbar-dropdown-dropbar-margin-top !default;
-$navbar-dropdown-nav-item-color:                                $global-muted-color !default;
-$navbar-dropdown-nav-item-hover-color:                          $global-color !default;
-$navbar-dropdown-nav-item-active-color:                         $global-emphasis-color !default;
-$navbar-dropdown-nav-header-color:                              $global-emphasis-color !default;
-$navbar-dropdown-nav-divider-border-width:                      $global-border-width !default;
-$navbar-dropdown-nav-divider-border:                            $global-border !default;
-$navbar-dropdown-nav-sublist-item-color:                        $global-muted-color !default;
-$navbar-dropdown-nav-sublist-item-hover-color:                  $global-color !default;
-$navbar-dropdown-nav-sublist-item-active-color:                 $global-emphasis-color !default;
-$navbar-dropbar-background:                                     $navbar-dropdown-background !default;
-$navbar-dropbar-z-index:                                        $global-z-index - 20 !default;
-
-// Inverse
-$inverse-navbar-background:                                     $inverse-global-muted-background !default;
-$inverse-navbar-nav-item-color:                                 $inverse-global-muted-color !default;
-$inverse-navbar-nav-item-hover-color:                           $inverse-global-color !default;
-$inverse-navbar-nav-item-onclick-color:                         $inverse-global-emphasis-color !default;
-$inverse-navbar-nav-item-active-color:                          $inverse-global-emphasis-color !default;
-$inverse-navbar-item-color:                                     $inverse-global-color !default;
-$inverse-navbar-toggle-color:                                   $inverse-global-muted-color !default;
-$inverse-navbar-toggle-hover-color:                             $inverse-global-color !default;
-$inverse-navbar-dropdown-background:                            $inverse-global-muted-background !default;
-$inverse-navbar-dropdown-color:                                 $inverse-global-color !default;
-$inverse-navbar-dropdown-nav-item-color:                        $inverse-global-muted-color !default;
-$inverse-navbar-dropdown-nav-item-hover-color:                  $inverse-global-color !default;
-$inverse-navbar-dropdown-nav-header-color:                      $inverse-global-emphasis-color !default;
-$inverse-navbar-dropdown-nav-divider-border:                    $inverse-global-border !default;
-$inverse-navbar-dropdown-nav-sublist-item-color:                $inverse-global-muted-color !default;
-$inverse-navbar-dropdown-nav-sublist-item-hover-color:          $inverse-global-color !default;
-$inverse-navbar-dropbar-background:                             $inverse-navbar-dropdown-background !default;
-
-
-// Overlay
-// ========================================================================
-
-$overlay-padding-horizontal:                                    $global-gutter !default;
-$overlay-padding-vertical:                                      $global-gutter !default;
-$overlay-default-background:                                    rgba($global-background, 80%) !default;
-$overlay-primary-background:                                    rgba($global-secondary-background, 80%) !default;
-$overlay-primary-color-mode:                                    light !default;
-
-
-// Padding
-// ========================================================================
-
-$padding-padding:                                               $global-gutter !default;
-$padding-padding-l:                                             $global-medium-gutter !default;
-$padding-small-padding:                                         $global-small-gutter !default;
-$padding-large-padding:                                         $global-gutter !default;
-$padding-large-padding-l:                                       $global-large-gutter !default;
-
-
-// Pagination
-// ========================================================================
-
-$pagination-margin-horizontal:                                  0 !default;
-$pagination-item-padding-vertical:                              5px !default;
-$pagination-item-padding-horizontal:                            10px !default;
-$pagination-item-color:                                         $global-muted-color !default;
-$pagination-item-hover-color:                                   $global-color !default;
-$pagination-item-hover-text-decoration:                         none !default;
-$pagination-item-active-color:                                  $global-color !default;
-$pagination-item-disabled-color:                                $global-muted-color !default;
-
-// Inverse
-$inverse-pagination-item-color:                                 $inverse-global-muted-color !default;
-$inverse-pagination-item-hover-color:                           $inverse-global-color !default;
-$inverse-pagination-item-active-color:                          $inverse-global-color !default;
-$inverse-pagination-item-disabled-color:                        $inverse-global-muted-color !default;
-
-
-// Placeholder
-// ========================================================================
-
-$placeholder-margin-vertical:                                   $global-margin !default;
-$placeholder-padding-vertical:                                  $global-gutter !default;
-$placeholder-padding-horizontal:                                $global-gutter !default;
-$placeholder-background:                                        $global-muted-background !default;
-
-
-// Position
-// ========================================================================
-
-$position-small-margin:                                         $global-small-gutter !default;
-$position-medium-margin:                                        $global-gutter !default;
-$position-large-margin:                                         $global-gutter !default;
-$position-large-margin-l:                                       50px !default;
-
-
-// Progress
-// ========================================================================
-
-$progress-height:                                               15px !default;
-$progress-margin-vertical:                                      $global-margin !default;
-$progress-background:                                           $global-muted-background !default;
-$progress-bar-background:                                       $global-primary-background !default;
-
-
-// Radio
-// ========================================================================
-
-$radio-size:                                                    20px !default;
-$radio-background:                                              $control-background !default;
-$radio-border-width:                                            $control-border-width !default;
-$radio-border:                                                  $control-border !default;
-$radio-hover-border:                                            $global-primary-border !default;
-$radio-focus-background:                                        $control-focus-background !default;
-$radio-focus-border:                                            $control-focus-border !default;
-$radio-checked-background:                                      transparent !default;
-$radio-checked-border:                                          $global-primary-border !default;
-$radio-checked-icon-color:                                      $global-primary-background !default;
-$radio-control-background:                                      rgba($control-background, 45%) !default;
-$radio-checked-control-background:                              rgba($radio-checked-icon-color, 15%) !default;
-$radio-checked-control-color:                                   $global-primary-background !default;
-$radio-disabled-background:                                     $control-disabled-background !default;
-$radio-disabled-border:                                         $control-disabled-border !default;
-$radio-disabled-icon-color:                                     $global-emphasis-color !default;
-
-
-// Search
-// ========================================================================
-
-$search-color:                                                  $global-color !default;
-$search-placeholder-color:                                      $global-muted-color !default;
-$search-icon-color:                                             $global-muted-color !default;
-$search-default-width:                                          180px !default;
-$search-default-height:                                         $global-control-height !default;
-$search-default-padding-horizontal:                             6px !default;
-$search-default-background:                                     $global-muted-background !default;
-$search-default-focus-background:                               $search-default-background !default;
-$search-default-icon-width:                                     $global-control-height !default;
-$search-navbar-width:                                           400px !default;
-$search-navbar-height:                                          40px !default;
-$search-navbar-background:                                      transparent !default;
-$search-navbar-font-size:                                       $global-large-font-size !default;
-$search-navbar-icon-width:                                      40px !default;
-$search-large-width:                                            500px !default;
-$search-large-height:                                           80px !default;
-$search-large-background:                                       transparent !default;
-$search-large-font-size:                                        $global-2xlarge-font-size !default;
-$search-large-icon-width:                                       80px !default;
-$search-toggle-color:                                           $global-muted-color !default;
-$search-toggle-hover-color:                                     $global-color !default;
-
-// Inverse
-$inverse-search-color:                                          $inverse-global-color !default;
-$inverse-search-placeholder-color:                              $inverse-global-muted-color !default;
-$inverse-search-icon-color:                                     $inverse-global-muted-color !default;
-$inverse-search-default-background:                             $inverse-global-muted-background !default;
-$inverse-search-default-focus-background:                       $inverse-search-default-background !default;
-$inverse-search-navbar-background:                              transparent !default;
-$inverse-search-large-background:                               transparent !default;
-$inverse-search-toggle-color:                                   $inverse-global-muted-color !default;
-$inverse-search-toggle-hover-color:                             $inverse-global-color !default;
-
-
-// Section
-// ========================================================================
-
-$section-padding-vertical:                                      $global-medium-margin !default;
-$section-padding-vertical-m:                                    $global-large-margin !default;
-$section-xsmall-padding-vertical:                               $global-margin !default;
-$section-small-padding-vertical:                                $global-medium-margin !default;
-$section-large-padding-vertical:                                $global-large-margin !default;
-$section-large-padding-vertical-m:                              $global-xlarge-margin !default;
-$section-xlarge-padding-vertical:                               $global-xlarge-margin !default;
-$section-xlarge-padding-vertical-m:                             ($global-large-margin + $global-xlarge-margin) !default;
-$section-default-background:                                    $global-background !default;
-$section-default-color-mode:                                    dark !default;
-$section-muted-background:                                      $global-muted-background !default;
-$section-muted-color-mode:                                      dark !default;
-$section-primary-background:                                    $global-primary-background !default;
-$section-primary-color-mode:                                    light !default;
-$section-secondary-background:                                  $global-secondary-background !default;
-$section-secondary-color-mode:                                  light !default;
-$section-tertiary-background:                                   $global-tertiary-background !default;
-$section-tertiary-color-mode:                                   light !default;
-
-
-// Select
-// ========================================================================
-
-$select-border:                                                 $control-border !default;
-$select-border-style:                                           $control-border-style !default;
-$select-border-width:                                           $control-border-width !default;
-$select-border-radius:                                          $control-border-radius !default;
-$select-hover-border:                                           $control-hover-border !default;
-$select-focus-border:                                           $control-focus-border !default;
-$select-disabled-border:                                        $control-disabled-border !default;
-$select-height:                                                 $control-height !default;
-$select-small-height:                                           $control-small-height !default;
-$select-medium-height:                                          $control-medium-height !default;
-$select-large-height:                                           $control-large-height !default;
-$select-arrow-icon-size:                                        24px !default;
-$select-gutter:                                                 5px !default;
-$select-small-gutter:                                           5px !default;
-$select-medium-gutter:                                          15px !default;
-$select-large-gutter:                                           12px !default;
-$select-selector-padding-horizontal:                            $control-padding-horizontal !default;
-$select-selector-medium-padding-horizontal:                     $control-medium-padding-horizontal !default;
-$select-selector-large-padding-horizontal:                      $control-large-padding-horizontal !default;
-$select-selection-search-input-color:                           $control-color !default;
-$select-selection-placeholder-color:                            $control-placeholder-color !default;
-$select-selection-item-background:                              $global-background !default;
-$select-selection-item-border-radius:                           $control-border-radius !default;
-$select-selection-item-font-size:                               14px !default;
-$select-selection-item-line-height:                             24px !default;
-$select-selection-item-remove-icon-size:                        $select-selection-item-font-size !default;
-$select-selection-item-remove-icon-hover-color:                 $global-primary-background !default;
-$select-dropdown-background:                                    darken($global-background, 5%) !default;
-$select-dropdown-border:                                        $control-border !default;
-$select-dropdown-border-style:                                  $control-border-style !default;
-$select-dropdown-border-width:                                  $control-border-width !default;
-$select-dropdown-border-radius:                                 $control-border-radius !default;
-$select-icon-color:                                             $control-icon-color !default;
-$select-icon-hover-color:                                       $control-icon-hover-color !default;
-$select-icon-disabled-color:                                    $control-disabled-color !default;
-$select-item-color:                                             $control-color !default;
-$select-item-line-height:                                       24px !default;
-$select-item-active-background:                                 $global-default-background !default;
-$select-item-selected-background:                               darken($global-background, 10%) !default;
-$select-item-selected-state-color:                              $global-primary-background !default;
-$select-item-disabled-color:                                    $control-disabled-color !default;
-$select-item-group-color:                                       $global-muted-color !default;
-$select-item-group-font-size:                                   $global-small-font-size !default;
-$select-item-group-text-transform:                              uppercase !default;
-
-
-// Slidenav
-// ========================================================================
-
-$slidenav-padding-vertical:                                     5px !default;
-$slidenav-padding-horizontal:                                   10px !default;
-$slidenav-color:                                                rgba($global-color, 50%) !default;
-$slidenav-hover-color:                                          rgba($global-color, 90%) !default;
-$slidenav-active-color:                                         rgba($global-color, 50%) !default;
-$slidenav-large-padding-vertical:                               10px !default;
-$slidenav-large-padding-horizontal:                             $slidenav-large-padding-vertical !default;
-
-// Inverse
-$inverse-slidenav-color:                                        rgba($inverse-global-color, 70%) !default;
-$inverse-slidenav-hover-color:                                  rgba($inverse-global-color, 95%) !default;
-$inverse-slidenav-active-color:                                 rgba($inverse-global-color, 70%) !default;
-
-
-// Slider
-// ========================================================================
-
-$slider-container-margin-top:                                   -11px !default;
-$slider-container-margin-bottom:                                -39px !default;
-$slider-container-margin-left:                                  -25px !default;
-$slider-container-margin-right:                                 -25px !default;
-
-
-// Sortable
-// ========================================================================
-
-$sortable-dragged-z-index:                                      $global-z-index + 50 !default;
-$sortable-placeholder-opacity:                                  0 !default;
-$sortable-empty-height:                                         50px !default;
-
-
-// Spinner
-// ========================================================================
-
-$spinner-size:                                                  30px !default;
-$spinner-stroke-width:                                          2 !default;
-$spinner-radius:                                                floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default; // Minus stroke width to prevent overflow clipping
-$spinner-circumference:                                         round(2 * 3.141 * $spinner-radius) !default;
-$spinner-duration:                                              1.4s !default;
-
-
-// Sticky
-// ========================================================================
-
-$sticky-z-index:                                                $global-z-index - 20 !default;
-$sticky-animation-duration:                                     0.2s !default;
-$sticky-reverse-animation-duration:                             0.2s !default;
-
-
-// Subnav
-// ========================================================================
-
-$subnav-margin-horizontal:                                      20px !default;
-$subnav-item-color:                                             $global-muted-color !default;
-$subnav-item-hover-color:                                       $global-color !default;
-$subnav-item-hover-text-decoration:                             none !default;
-$subnav-item-active-color:                                      $global-emphasis-color !default;
-$subnav-divider-margin-horizontal:                              $subnav-margin-horizontal !default;
-$subnav-divider-border-height:                                  1.5em !default;
-$subnav-divider-border-width:                                   $global-border-width !default;
-$subnav-divider-border:                                         $global-border !default;
-$subnav-pill-item-padding-vertical:                             5px !default;
-$subnav-pill-item-padding-horizontal:                           10px !default;
-$subnav-pill-item-background:                                   transparent !default;
-$subnav-pill-item-color:                                        $subnav-item-color !default;
-$subnav-pill-item-hover-background:                             $global-muted-background !default;
-$subnav-pill-item-hover-color:                                  $global-color !default;
-$subnav-pill-item-onclick-background:                           $subnav-pill-item-hover-background !default;
-$subnav-pill-item-onclick-color:                                $subnav-pill-item-hover-color !default;
-$subnav-pill-item-active-background:                            $global-primary-background !default;
-$subnav-pill-item-active-color:                                 $global-inverse-color !default;
-$subnav-item-disabled-color:                                    $global-muted-color !default;
-
-// Inverse
-$inverse-subnav-item-color:                                     $inverse-global-muted-color !default;
-$inverse-subnav-item-hover-color:                               $inverse-global-color !default;
-$inverse-subnav-item-active-color:                              $inverse-global-emphasis-color !default;
-$inverse-subnav-divider-border:                                 $inverse-global-border !default;
-$inverse-subnav-pill-item-background:                           transparent !default;
-$inverse-subnav-pill-item-color:                                $inverse-global-muted-color !default;
-$inverse-subnav-pill-item-hover-background:                     $inverse-global-muted-background !default;
-$inverse-subnav-pill-item-hover-color:                          $inverse-global-color !default;
-$inverse-subnav-pill-item-onclick-background:                   $inverse-subnav-pill-item-hover-background !default;
-$inverse-subnav-pill-item-onclick-color:                        $inverse-subnav-pill-item-hover-color !default;
-$inverse-subnav-pill-item-active-background:                    $inverse-global-primary-background !default;
-$inverse-subnav-pill-item-active-color:                         $inverse-global-inverse-color !default;
-$inverse-subnav-item-disabled-color:                            $inverse-global-muted-color !default;
-
-
-// Switch
-// ========================================================================
-
-$switch-background:                                             darken($global-muted-background, 20%) !default;
-$switch-checked-background:                                     $global-success-background !default;
-$switch-border:                                                 $global-border !default;
-$switch-border-style:                                           $global-border-style !default;
-$switch-border-width:                                           $global-border-width !default;
-$switch-border-radius:                                          100px !default;
-$switch-height:                                                 22px !default;
-$switch-width:                                                  44px !default;
-$switch-handle-background:                                      $global-background !default;
-$switch-handle-border-radius:                                   100px !default;
-$switch-handle-offset:                                          2px !default;
-
-
-// Tabs
-// ========================================================================
-
-$tabs-margin-horizontal:                                        20px !default;
-$tabs-margin-vertical:                                          10px !default;
-$tabs-tab-padding-horizontal:                                   15px !default;
-$tabs-tab-padding-vertical:                                     10px !default;
-$tabs-large-tab-padding-horizontal:                             25px !default;
-$tabs-large-tab-padding-vertical:                               20px !default;
-$tabs-tab-font-size:                                            $global-font-size !default;
-$tabs-tab-color:                                                $global-color !default;
-$tabs-tab-hover-color:                                          $global-primary-background !default;
-$tabs-tab-active-color:                                         $global-primary-background !default;
-$tabs-tab-disabled-color:                                       $global-muted-color !default;
-$tabs-tab-remove-color:                                         $global-muted-color !default;
-$tabs-tab-remove-font-size:                                     $global-small-font-size !default;
-$tabs-tab-remove-hover-color:                                   $global-danger-background !default;
-$tabs-tab-remove-active-color:                                  $global-danger-background !default;
-$tabs-nav-more-font-size:                                       $global-small-font-size !default;
-$tabs-ink-bar-color:                                            $global-primary-background !default;
-$tabs-ink-bar-height:                                           2px !default;
-$tabs-ink-bar-width:                                            2px !default;
-$tabs-card-tab-background:                                      $global-muted-background !default;
-$tabs-card-tab-border-width:                                    $global-border-width !default;
-$tabs-card-tab-border-style:                                    $global-border-style !default;
-$tabs-card-tab-border:                                          $global-border !default;
-$tabs-card-tab-border-radius:                                   $global-border-radius !default;
-$tabs-card-tab-padding-horizontal:                              15px !default;
-$tabs-card-tab-padding-vertical:                                10px !default;
-$tabs-card-large-tab-padding-horizontal:                        25px !default;
-$tabs-card-large-tab-padding-vertical:                          20px !default;
-$tabs-card-tab-active-background:                               $global-background !default;
-$tabs-card-gutter:                                              $global-xsmall-gutter !default;
-$tabs-dropdown-background:                                      $dropdown-background !default;
-$tabs-dropdown-border-radius:                                   $global-border-radius !default;
-$tabs-dropdown-item-color:                                      $tabs-tab-color !default;
-$tabs-dropdown-item-hover-color:                                $global-inverse-color !default;
-$tabs-dropdown-item-disabled-color:                             $tabs-tab-disabled-color !default;
-$tabs-dropdown-item-hover-background:                           $global-primary-background !default;
-$tabs-dropdown-item-padding-horizontal:                         $tabs-tab-padding-horizontal !default;
-$tabs-dropdown-item-padding-vertical:                           $tabs-tab-padding-vertical !default;
-
-// Inverse
-$inverse-tabs-tab-color:                                        $inverse-global-muted-color !default;
-$inverse-tabs-tab-hover-color:                                  $inverse-global-color !default;
-$inverse-tabs-tab-active-color:                                 $inverse-global-emphasis-color !default;
-$inverse-tabs-tab-disabled-color:                               $inverse-global-muted-color !default;
-
-
-// Table
-// ========================================================================
-
-$table-margin-vertical:                                         $global-margin !default;
-$table-cell-padding-vertical:                                   16px !default;
-$table-cell-padding-horizontal:                                 12px !default;
-$table-header-cell-font-size:                                   $global-font-size !default;
-$table-header-cell-font-weight:                                 bold !default;
-$table-header-cell-color:                                       $global-color !default;
-$table-footer-font-size:                                        $global-small-font-size !default;
-$table-caption-font-size:                                       $global-small-font-size !default;
-$table-caption-color:                                           $global-muted-color !default;
-$table-row-active-background:                                   #ffd !default;
-$table-divider-border-width:                                    $global-border-width !default;
-$table-divider-border:                                          $global-border !default;
-$table-striped-row-background:                                  $global-muted-background !default;
-$table-hover-row-background:                                    $table-row-active-background !default;
-$table-small-cell-padding-vertical:                             10px !default;
-$table-small-cell-padding-horizontal:                           12px !default;
-$table-large-cell-padding-vertical:                             22px !default;
-$table-large-cell-padding-horizontal:                           12px !default;
-$table-expand-min-width:                                        150px !default;
-
-// Inverse
-$inverse-table-header-cell-color:                               $inverse-global-color !default;
-$inverse-table-caption-color:                                   $inverse-global-muted-color !default;
-$inverse-table-row-active-background:                           fade-out($inverse-global-muted-background, 0.02) !default;
-$inverse-table-divider-border:                                  $inverse-global-border !default;
-$inverse-table-striped-row-background:                          $inverse-global-muted-background !default;
-$inverse-table-hover-row-background:                            $inverse-table-row-active-background !default;
-
-
-// Text
-// ========================================================================
-
-$text-base-font-size:                                           $global-font-size !default;
-$text-base-line-height:                                         $global-line-height !default;
-$text-base-color:                                               $global-color !default;
-$text-lead-font-size:                                           $global-large-font-size !default;
-$text-lead-line-height:                                         1.5 !default;
-$text-lead-color:                                               $global-emphasis-color !default;
-$text-meta-font-size:                                           $global-small-font-size !default;
-$text-meta-line-height:                                         1.4 !default;
-$text-meta-color:                                               $global-muted-color !default;
-$text-xsmall-font-size:                                         $global-xsmall-font-size !default;
-$text-xsmall-line-height:                                       1.4 !default;
-$text-small-font-size:                                          $global-small-font-size !default;
-$text-small-line-height:                                        1.5 !default;
-$text-large-font-size:                                          $global-large-font-size !default;
-$text-large-line-height:                                        1.5 !default;
-$text-muted-color:                                              $global-muted-color !default;
-$text-emphasis-color:                                           $global-emphasis-color !default;
-$text-primary-color:                                            $global-primary-background !default;
-$text-secondary-color:                                          $global-secondary-background !default;
-$text-success-color:                                            $global-success-background !default;
-$text-warning-color:                                            $global-warning-background !default;
-$text-danger-color:                                             $global-danger-background !default;
-$text-background-color:                                         $global-primary-background !default;
-
-// Inverse
-$inverse-text-lead-color:                                       $inverse-global-color !default;
-$inverse-text-meta-color:                                       $inverse-global-muted-color !default;
-$inverse-text-muted-color:                                      $inverse-global-muted-color !default;
-$inverse-text-emphasis-color:                                   $inverse-global-emphasis-color !default;
-$inverse-text-primary-color:                                    $inverse-global-primary-background !default;
-$inverse-text-secondary-color:                                  $inverse-global-primary-background !default;
-$inverse-text-tertiary-color:                                   $inverse-global-primary-background !default;
-
-
-// Textarea
-// ========================================================================
-
-$textarea-counter-background:                                   $global-default-background;
-$textarea-counter-border-radius:                                $control-border-radius;
-$textarea-counter-color:                                        $global-muted-color;
-$textarea-counter-font-size:                                    0.8em;
-
-
-// Thumbnav
-// ========================================================================
-
-$thumbnav-margin-horizontal:                                    15px !default;
-$thumbnav-margin-vertical:                                      $thumbnav-margin-horizontal !default;
-
-
-// Tile
-// ========================================================================
-
-$tile-padding-horizontal:                                       15px !default;
-$tile-padding-horizontal-s:                                     $global-gutter !default;
-$tile-padding-horizontal-m:                                     $global-medium-gutter !default;
-$tile-padding-vertical:                                         $global-medium-margin !default;
-$tile-padding-vertical-m:                                       $global-large-margin !default;
-$tile-xsmall-padding-vertical:                                  $global-margin !default;
-$tile-small-padding-vertical:                                   $global-medium-margin !default;
-$tile-large-padding-vertical:                                   $global-large-margin !default;
-$tile-large-padding-vertical-m:                                 $global-xlarge-margin !default;
-$tile-xlarge-padding-vertical:                                  $global-xlarge-margin !default;
-$tile-xlarge-padding-vertical-m:                                ($global-large-margin + $global-xlarge-margin) !default;
-$tile-default-background:                                       $global-background !default;
-$tile-default-color-mode:                                       dark !default;
-$tile-muted-background:                                         $global-muted-background !default;
-$tile-muted-color-mode:                                         dark !default;
-$tile-primary-background:                                       $global-primary-background !default;
-$tile-primary-color-mode:                                       light !default;
-$tile-secondary-background:                                     $global-secondary-background !default;
-$tile-secondary-color-mode:                                     light !default;
-$tile-tertiary-background:                                      $global-tertiary-background !default;
-$tile-tertiary-color-mode:                                      light !default;
-
-
-// Tooltip
-// ========================================================================
-
-$tooltip-z-index:                                               $global-z-index + 30 !default;
-$tooltip-max-width:                                             200px !default;
-$tooltip-padding-vertical:                                      3px !default;
-$tooltip-padding-horizontal:                                    6px !default;
-$tooltip-background:                                            #666 !default;
-$tooltip-border-radius:                                         2px !default;
-$tooltip-color:                                                 $global-inverse-color !default;
-$tooltip-font-size:                                             12px !default;
-$tooltip-margin:                                                10px !default;
-
-
-// Totop
-// ========================================================================
-
-$totop-padding:                                                 5px !default;
-$totop-color:                                                   $global-muted-color !default;
-$totop-hover-color:                                             $global-color !default;
-$totop-active-color:                                            $global-emphasis-color !default;
-
-// Inverse
-$inverse-totop-color:                                           $inverse-global-muted-color !default;
-$inverse-totop-hover-color:                                     $inverse-global-color !default;
-$inverse-totop-active-color:                                    $inverse-global-emphasis-color !default;
-
-
-// Utility
-// ========================================================================
-
-$panel-scrollable-height:                                       170px !default;
-$panel-scrollable-padding:                                      10px !default;
-$panel-scrollable-border-width:                                 $global-border-width !default;
-$panel-scrollable-border:                                       $global-border !default;
-$border-rounded-border-radius:                                  5px !default;
-$box-shadow-duration:                                           0.1s !default;
-$box-shadow-bottom-height:                                      30px !default;
-$box-shadow-bottom-border-radius:                               100% !default;
-$box-shadow-bottom-background:                                  #444 !default;
-$box-shadow-bottom-blur:                                        20px !default;
-$dropcap-margin-right:                                          10px !default;
-$dropcap-font-size:                                             (($global-line-height * 3) * 1em) !default;
-$logo-font-size:                                                $global-large-font-size !default;
-$logo-font-family:                                              $global-font-family !default;
-$logo-color:                                                    $global-color !default;
-$logo-hover-color:                                              $global-color !default;
-$dragover-box-shadow:                                           0 0 20px rgb(100 100 100 / 30%) !default;
-
-// Inverse
-$inverse-logo-color:                                            $inverse-global-color !default;
-$inverse-logo-hover-color:                                      $inverse-global-color !default;
-
-
-// Width
-// ========================================================================
-
-$width-small-width:                                             150px !default;
-$width-medium-width:                                            300px !default;
-$width-large-width:                                             450px !default;
-$width-xlarge-width:                                            600px !default;
-$width-2xlarge-width:                                           750px !default;