@broxus/react-uikit 0.1.0

package/dist/esm/styles/variables.scss

@@ -0,0 +1,1787 @@
+//
+// Component:       Variables
+// Description:     Defines common values which are used across all components
+//
+// ========================================================================
+
+@import 'mixin.scss';
+
+
+// Load deprecated components
+// ========================================================================
+
+$deprecated:                                    false !default;
+
+
+// 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-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;
+
+
+// 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:                    #c16635 !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:                                 $global-default-background !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;
+
+//
+// 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;
+
+
+// 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-open-image-path:                'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E' !default;
+$accordion-icon-close-image-path:               'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E' !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;
+
+
+// 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;
+
+
+// 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-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-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;
+
+
+// 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
+
+
+// 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-icon-image-path:                       '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;
+$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;
+
+// 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-mask-background:                        rgb(0 0 0 / 30%) !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-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;
+
+
+// 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-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-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-indeterminate-size:                   $checkbox-size - 10px !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-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;
+
+
+// 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:                                 7px !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;
+
+
+// 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;
+
+
+// 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-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;
+$nav-parent-icon-close-image-path:              'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E' !default;
+$nav-parent-icon-open-image-path:               'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E' !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;
+
+
+// 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-muted-background:                      $global-muted-background !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;
+
+
+// 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;
+
+
+// Tab
+// ========================================================================
+
+$tabs-margin-horizontal:                        20px !default;
+$tabs-margin-vertical:                          10px !default;
+$tabs-tab-padding-horizontal:                   10px !default;
+$tabs-tab-padding-vertical:                     5px !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:              10px !default;
+$tabs-card-tab-padding-vertical:                5px !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-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-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;
+
+
+// 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-muted-background:                         $global-muted-background !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;
+
+
+// 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;
+
+
+// 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;