@ptsecurity/mosaic 14.1.0 → 14.2.0

package/_visual.scss

@@ -1,11 +1,3037 @@
-@use './body';
-@use './layout';
-@use './layout-media';
+@mixin size($width, $height) {
+    width: $width;
+    height: $height;
+}
+
+@mixin square($size) {
+    @include size($size, $size);
+}
+
+
+
+@mixin body-html() {
+
+    // HTML & Body reset
+    html,
+    body {
+        @include square(100%);
+    }
+
+    html {
+        // Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+
+        // Setting @viewport causes scrollbars to overlap content in Edge, so
+        // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+        -ms-overflow-style: scrollbar;
+
+        -moz-osx-font-smoothing: grayscale;
+
+        // Helps fonts on OSX looks more consistent with other systems
+        // Isn't currently in button styles due to performance concerns
+        -webkit-font-smoothing: antialiased;
+        // Change the default tap highlight to be completely transparent in iOS.
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+        -webkit-touch-callout: none;
+    }
+
+    body {
+        // remove the margin in all browsers.
+        margin: 0;
+    }
+}
+
+// mixin definition ; sets LTR and RTL within the same style call
+// @see https://css-tricks.com/almanac/properties/d/direction/
+
+@mixin rtl($prop, $ltr-value, $rtl-value) {
+    #{$prop}: $ltr-value;
+
+    [dir=rtl] & {
+        #{$prop}: $rtl-value;
+    }
+}
+
+@mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
+    #{$ltr-prop}: $value;
+
+    [dir=rtl] & {
+        #{$ltr-prop}: $reset-value;
+        #{$rtl-prop}: $value;
+    }
+}
+
+// To reverse padding (top left bottom right) -> (top right bottom left)
+@function rtl-value($list) {
+    @if length($list) == 4 {
+        @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2)
+    }
+    @if length($list) == 5 {
+        @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2) nth($list, 5)
+    }
+    @return $list;
+}
+
+
+// Do not edit directly
+
+$light-color-scheme-primary-default: #0374eb;
+$light-color-scheme-second-default: #6d7a86;
+$light-color-scheme-error-default: #db3c55;
+$light-color-scheme-info-default: #0374eb;
+$light-color-scheme-success-default: #028b49;
+$light-color-scheme-warning-default: #a26e0c;
+$light-color-scheme-foreground-text: #19252f;
+$light-color-scheme-foreground-text-less-contrast: #6d7a86;
+$light-color-scheme-foreground-text-disabled: #8c99a5;
+$light-color-scheme-foreground-text-error: #db3c55;
+$light-color-scheme-foreground-text-success: #016b37;
+$light-color-scheme-foreground-divider: #d7dee4;
+$light-color-scheme-foreground-border: #bdc7d1;
+$light-color-scheme-foreground-icon: #8c99a5;
+$light-color-scheme-background-background: white;
+$light-color-scheme-background-background-disabled: #f2f5f9;
+$light-color-scheme-background-background-less-contrast: #f2f5f9;
+$light-color-scheme-background-background-under: #f2f5f9;
+$light-color-scheme-background-overlay-hover: rgba(black, 0.05);
+$light-color-scheme-background-overlay-active: rgba(black, 0.1);
+$light-color-scheme-background-overlay-disabled: rgba(white, 0.3);
+$light-color-scheme-states-focused-color: #0374eb;
+$light-color-scheme-states-focused-color-error: #db3c55;
+$light-color-scheme-states-selected-color: #e7f1ff;
+$light-color-scheme-states-pressed-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
+$light-color-scheme-states-disabled-opacity: 0.3;
+$dark-color-scheme-primary-default: #0059b8;
+$dark-color-scheme-second-default: #515e69;
+$dark-color-scheme-error-default: #b9023a;
+$dark-color-scheme-info-default: #0c6579;
+$dark-color-scheme-success-default: #016b37;
+$dark-color-scheme-warning-default: #7e5406;
+$dark-color-scheme-foreground-text: #d7dee4;
+$dark-color-scheme-foreground-text-less-contrast: #8c99a5;
+$dark-color-scheme-foreground-text-disabled: #6d7a86;
+$dark-color-scheme-foreground-text-error: #ee6f79;
+$dark-color-scheme-foreground-text-success: #4ba96c;
+$dark-color-scheme-foreground-divider: mix(#515e69, transparent, 50%);
+$dark-color-scheme-foreground-border: #515e69;
+$dark-color-scheme-foreground-icon: #8c99a5;
+$dark-color-scheme-background-background: #19252f;
+$dark-color-scheme-background-background-disabled: #333f4a;
+$dark-color-scheme-background-background-less-contrast: #27333e;
+$dark-color-scheme-background-background-under: #151e25;
+$dark-color-scheme-background-overlay-hover: rgba(white, 0.05);
+$dark-color-scheme-background-overlay-active: rgba(white, 0.1);
+$dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
+$dark-color-scheme-states-focused-color: #4187ff;
+$dark-color-scheme-states-focused-color-error: #b9023a;
+$dark-color-scheme-states-selected-color: rgba(3, 116, 235, 0.3);
+$dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
+$dark-color-scheme-states-disabled-opacity: 0.45;
+$font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$font-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$font-family-monospace: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$size-3xs: 2px;
+$size-xxs: 4px;
+$size-xs: 6px;
+$size-s: 8px;
+$size-m: 12px;
+$size-l: 16px;
+$size-xl: 20px;
+$size-xxl: 24px;
+$size-3xl: 32px;
+$size-4xl: 40px;
+$size-5xl: 48px;
+$size-6xl: 56px;
+$size-7xl: 64px;
+$size-border-width: 1px;
+$size-border-radius: 4px;
+$size-option-height: 32px;
+$size-panel-height: 48px;
+$size-control-s-height: 16px;
+$size-control-m-height: 32px;
+$size-button-min-width: 64px;
+$size-badge-tag-height: 24px;
+$size-header-height: 56px;
+$size-footer-height: 64px;
+$padding-control-horizontal: 16px;
+$padding-option-horizontal: 16px;
+$padding-badge-tag-horizontal: 8px;
+$padding-header-right: 8px;
+$padding-header-footer-horizontal: 16px;
+$margin-control-group-s-vertical: 8px;
+$margin-icon-text-m-horizontal: 8px;
+$margin-icon-text-s-horizontal: 4px;
+$palette-blue-40: #eff6ff;
+$palette-blue-60: #e7f1ff;
+$palette-blue-100: #c8dfff;
+$palette-blue-200: #a2c7fe;
+$palette-blue-300: #5697ff;
+$palette-blue-400: #4187ff;
+$palette-blue-500: #0374eb;
+$palette-blue-560: #0059b8;
+$palette-blue-600: #014b9d;
+$palette-blue-700: #023c7f;
+$palette-blue-800: #193060;
+$palette-blue-900: #00224f;
+$palette-blue-1000: #001a40;
+$palette-blue-a100: rgba(3, 116, 235, 0.15);
+$palette-blue-a200: rgba(3, 116, 235, 0.3);
+$palette-blue-contrast-40: #4D4D4D;
+$palette-blue-contrast-60: #4D4D4D;
+$palette-blue-contrast-100: #4D4D4D;
+$palette-blue-contrast-200: #4D4D4D;
+$palette-blue-contrast-300: #4D4D4D;
+$palette-blue-contrast-400: white;
+$palette-blue-contrast-500: white;
+$palette-blue-contrast-560: white;
+$palette-blue-contrast-600: white;
+$palette-blue-contrast-700: white;
+$palette-blue-contrast-800: white;
+$palette-blue-contrast-a100: #4D4D4D;
+$palette-blue-contrast-a200: white;
+$palette-green-40: #ecf9ef;
+$palette-green-60: #d2f7db;
+$palette-green-100: #b6ebc3;
+$palette-green-200: #8ed5a1;
+$palette-green-300: #4ba96c;
+$palette-green-400: #319d5c;
+$palette-green-500: #028b49;
+$palette-green-560: #016b37;
+$palette-green-600: #015a2d;
+$palette-green-700: #004823;
+$palette-green-800: #103920;
+$palette-green-900: #002a12;
+$palette-green-1000: #00210c;
+$palette-green-a100: rgba(2, 139, 73, 0.15);
+$palette-green-contrast-40: #4D4D4D;
+$palette-green-contrast-60: #4D4D4D;
+$palette-green-contrast-100: #4D4D4D;
+$palette-green-contrast-200: #4D4D4D;
+$palette-green-contrast-300: #4D4D4D;
+$palette-green-contrast-400: white;
+$palette-green-contrast-500: white;
+$palette-green-contrast-560: white;
+$palette-green-contrast-600: white;
+$palette-green-contrast-700: white;
+$palette-green-contrast-800: white;
+$palette-green-contrast-a100: #4D4D4D;
+$palette-red-40: #fff3f3;
+$palette-red-60: #ffeaea;
+$palette-red-100: #fbd6d6;
+$palette-red-200: #fcb2b4;
+$palette-red-300: #ee6f79;
+$palette-red-400: #ea5868;
+$palette-red-500: #db3c55;
+$palette-red-560: #b9023a;
+$palette-red-600: #9e0130;
+$palette-red-700: #800025;
+$palette-red-800: #621420;
+$palette-red-900: #500013;
+$palette-red-1000: #41000b;
+$palette-red-a100: rgba(219, 60, 85, 0.15);
+$palette-red-contrast-40: #4D4D4D;
+$palette-red-contrast-60: #4D4D4D;
+$palette-red-contrast-100: #4D4D4D;
+$palette-red-contrast-200: #4D4D4D;
+$palette-red-contrast-300: #4D4D4D;
+$palette-red-contrast-400: white;
+$palette-red-contrast-500: white;
+$palette-red-contrast-560: white;
+$palette-red-contrast-600: white;
+$palette-red-contrast-700: white;
+$palette-red-contrast-800: white;
+$palette-red-contrast-a100: #4D4D4D;
+$palette-grey-40: #f2f5f9;
+$palette-grey-60: #ebeef2;
+$palette-grey-100: #d7dee4;
+$palette-grey-200: #bdc7d1;
+$palette-grey-300: #8c99a5;
+$palette-grey-400: #7f8c98;
+$palette-grey-500: #6d7a86;
+$palette-grey-560: #515e69;
+$palette-grey-600: #434f5a;
+$palette-grey-700: #333f4a;
+$palette-grey-800: #27333e;
+$palette-grey-900: #19252f;
+$palette-grey-1000: #151e25;
+$palette-grey-a40: rgba(25, 37, 47, 0.04);
+$palette-grey-a60: rgba(25, 37, 47, 0.06);
+$palette-grey-a100: rgba(25, 37, 47, 0.1);
+$palette-grey-a200: rgba(25, 37, 47, 0.2);
+$palette-grey-a300: rgba(25, 37, 47, 0.3);
+$palette-grey-a500: rgba(25, 37, 47, 0.5);
+$palette-grey-contrast-40: #4D4D4D;
+$palette-grey-contrast-60: #4D4D4D;
+$palette-grey-contrast-100: #4D4D4D;
+$palette-grey-contrast-200: #4D4D4D;
+$palette-grey-contrast-300: #4D4D4D;
+$palette-grey-contrast-400: white;
+$palette-grey-contrast-500: white;
+$palette-grey-contrast-560: white;
+$palette-grey-contrast-600: white;
+$palette-grey-contrast-700: white;
+$palette-grey-contrast-800: white;
+$palette-yellow-40: #fff4dd;
+$palette-yellow-60: #ffecce;
+$palette-yellow-100: #fcdda6;
+$palette-yellow-200: #f5c23c;
+$palette-yellow-300: #e19f12;
+$palette-yellow-400: #c78816;
+$palette-yellow-500: #a26e0c;
+$palette-yellow-560: #7e5406;
+$palette-yellow-600: #6b4804;
+$palette-yellow-700: #543803;
+$palette-yellow-800: #3e3015;
+$palette-yellow-900: #312001;
+$palette-yellow-1000: #1f1500;
+$palette-yellow-a100: rgba(255, 159, 18, 0.15);
+$palette-yellow-contrast-40: #4D4D4D;
+$palette-yellow-contrast-60: #4D4D4D;
+$palette-yellow-contrast-100: #4D4D4D;
+$palette-yellow-contrast-200: #4D4D4D;
+$palette-yellow-contrast-300: #4D4D4D;
+$palette-yellow-contrast-400: white;
+$palette-yellow-contrast-500: white;
+$palette-yellow-contrast-560: white;
+$palette-yellow-contrast-600: white;
+$palette-yellow-contrast-700: white;
+$palette-yellow-contrast-800: white;
+$palette-yellow-contrast-a100: #4D4D4D;
+$palette-teal-40: #ebf8fd;
+$palette-teal-60: #d9f3fd;
+$palette-teal-100: #afe6f9;
+$palette-teal-200: #6ed3f2;
+$palette-teal-300: #18a5c5;
+$palette-teal-400: #2099b7;
+$palette-teal-500: #218ca8;
+$palette-teal-560: #0c6579;
+$palette-teal-600: #0c5567;
+$palette-teal-700: #084453;
+$palette-teal-800: #143641;
+$palette-teal-900: #022731;
+$palette-teal-1000: #001f28;
+$palette-teal-contrast-40: #4D4D4D;
+$palette-teal-contrast-60: #4D4D4D;
+$palette-teal-contrast-100: #4D4D4D;
+$palette-teal-contrast-200: #4D4D4D;
+$palette-teal-contrast-300: #4D4D4D;
+$palette-teal-contrast-400: white;
+$palette-teal-contrast-500: white;
+$palette-teal-contrast-560: white;
+$palette-teal-contrast-600: white;
+$palette-teal-contrast-700: white;
+$palette-teal-contrast-800: white;
+$palette-teal-contrast-a100: #4D4D4D;
+$palette-teal-contrast-a200: white;
+$palette-purple-40: #fff3fb;
+$palette-purple-60: #ffe9f8;
+$palette-purple-100: #f2d4e8;
+$palette-purple-200: #e4bbd7;
+$palette-purple-300: #c692b5;
+$palette-purple-400: #bb78a7;
+$palette-purple-500: #a65d92;
+$palette-purple-560: #864775;
+$palette-purple-600: #753865;
+$palette-purple-700: #612853;
+$palette-purple-800: #48273f;
+$palette-purple-900: #36172e;
+$palette-purple-1000: #23001b;
+$palette-purple-contrast-40: #4D4D4D;
+$palette-purple-contrast-60: #4D4D4D;
+$palette-purple-contrast-100: #4D4D4D;
+$palette-purple-contrast-200: #4D4D4D;
+$palette-purple-contrast-300: #4D4D4D;
+$palette-purple-contrast-400: white;
+$palette-purple-contrast-500: white;
+$palette-purple-contrast-560: white;
+$palette-purple-contrast-600: white;
+$palette-purple-contrast-700: white;
+$palette-purple-contrast-800: white;
+$palette-purple-contrast-a100: #4D4D4D;
+$palette-purple-contrast-a200: white;
+$alert-light-color-scheme-error-background: #fff3f3;
+$alert-light-color-scheme-error-border: #fbd6d6;
+$alert-light-color-scheme-error-icon: #ee6f79;
+$alert-light-color-scheme-warning-background: #fff4dd;
+$alert-light-color-scheme-warning-border: #fcdda6;
+$alert-light-color-scheme-warning-icon: #e19f12;
+$alert-light-color-scheme-success-background: #ecf9ef;
+$alert-light-color-scheme-success-border: #b6ebc3;
+$alert-light-color-scheme-success-icon: #4ba96c;
+$alert-light-color-scheme-info-background: #ebf8fd;
+$alert-light-color-scheme-info-border: #afe6f9;
+$alert-light-color-scheme-info-icon: #18a5c5;
+$alert-light-color-scheme-default-background: #f2f5f9;
+$alert-light-color-scheme-default-border: #d7dee4;
+$alert-light-color-scheme-default-icon: #8c99a5;
+$alert-dark-color-scheme-error-background: #500013;
+$alert-dark-color-scheme-error-border: #800025;
+$alert-dark-color-scheme-error-icon: #ee6f79;
+$alert-dark-color-scheme-warning-background: #3e3015;
+$alert-dark-color-scheme-warning-border: #543803;
+$alert-dark-color-scheme-warning-icon: #e19f12;
+$alert-dark-color-scheme-success-background: #103920;
+$alert-dark-color-scheme-success-border: #004823;
+$alert-dark-color-scheme-success-icon: #4ba96c;
+$alert-dark-color-scheme-info-background: #143641;
+$alert-dark-color-scheme-info-border: #084453;
+$alert-dark-color-scheme-info-icon: #18a5c5;
+$alert-dark-color-scheme-default-background: #27333e;
+$alert-dark-color-scheme-default-border: #333f4a;
+$alert-dark-color-scheme-default-icon: #8c99a5;
+$alert-size-border-width: 1px;
+$alert-size-border-radius: 4px;
+$alert-size-horizontal-padding: 16px;
+$alert-size-vertical-padding: 12px;
+$alert-size-icon-margin: 8px;
+$alert-size-close-button-width: 16px;
+$alert-size-small-vertical-padding: 12px;
+$alert-font-default-header: subheading;
+$alert-font-default-body: body;
+$alert-font-small-header: caption;
+$alert-font-small-body: caption;
+$autocomplete-size-panel-padding: 4px 0;
+$autocomplete-size-panel-max-height: 256px;
+$autocomplete-size-panel-border-radius: 4px;
+$badge-light-color-scheme-solid-primary-background: #4187ff;
+$badge-light-color-scheme-solid-primary-border: #4187ff;
+$badge-light-color-scheme-solid-primary-color: white;
+$badge-light-color-scheme-solid-info-background: #2099b7;
+$badge-light-color-scheme-solid-info-border: #2099b7;
+$badge-light-color-scheme-solid-info-color: white;
+$badge-light-color-scheme-solid-success-background: #319d5c;
+$badge-light-color-scheme-solid-success-border: #319d5c;
+$badge-light-color-scheme-solid-success-color: white;
+$badge-light-color-scheme-solid-warning-background: #c78816;
+$badge-light-color-scheme-solid-warning-border: #c78816;
+$badge-light-color-scheme-solid-warning-color: white;
+$badge-light-color-scheme-solid-error-background: #ea5868;
+$badge-light-color-scheme-solid-error-border: #ea5868;
+$badge-light-color-scheme-solid-error-color: white;
+$badge-light-color-scheme-solid-transparent-background: transparent;
+$badge-light-color-scheme-solid-transparent-border: #bdc7d1;
+$badge-light-color-scheme-solid-transparent-color: #19252f;
+$badge-light-color-scheme-solid-light-background: #d7dee4;
+$badge-light-color-scheme-solid-light-border: #d7dee4;
+$badge-light-color-scheme-solid-light-color: #19252f;
+$badge-light-color-scheme-solid-second-background: #7f8c98;
+$badge-light-color-scheme-solid-second-border: #7f8c98;
+$badge-light-color-scheme-solid-second-color: white;
+$badge-light-color-scheme-pastel-primary-background: #eff6ff;
+$badge-light-color-scheme-pastel-primary-border: #a2c7fe;
+$badge-light-color-scheme-pastel-primary-color: #4187ff;
+$badge-light-color-scheme-pastel-info-background: #ebf8fd;
+$badge-light-color-scheme-pastel-info-border: #6ed3f2;
+$badge-light-color-scheme-pastel-info-color: #2099b7;
+$badge-light-color-scheme-pastel-success-background: #ecf9ef;
+$badge-light-color-scheme-pastel-success-border: #8ed5a1;
+$badge-light-color-scheme-pastel-success-color: #028b49;
+$badge-light-color-scheme-pastel-warning-background: #fff4dd;
+$badge-light-color-scheme-pastel-warning-border: #f5c23c;
+$badge-light-color-scheme-pastel-warning-color: #a26e0c;
+$badge-light-color-scheme-pastel-error-background: #fff3f3;
+$badge-light-color-scheme-pastel-error-border: #fcb2b4;
+$badge-light-color-scheme-pastel-error-color: #db3c55;
+$badge-dark-color-scheme-pastel-primary-background: #193060;
+$badge-dark-color-scheme-pastel-primary-border: #014b9d;
+$badge-dark-color-scheme-pastel-primary-color: #a2c7fe;
+$badge-dark-color-scheme-pastel-info-background: #143641;
+$badge-dark-color-scheme-pastel-info-border: #0c5567;
+$badge-dark-color-scheme-pastel-info-color: #6ed3f2;
+$badge-dark-color-scheme-pastel-success-background: #103920;
+$badge-dark-color-scheme-pastel-success-border: #015a2d;
+$badge-dark-color-scheme-pastel-success-color: #8ed5a1;
+$badge-dark-color-scheme-pastel-warning-background: #3e3015;
+$badge-dark-color-scheme-pastel-warning-border: #6b4804;
+$badge-dark-color-scheme-pastel-warning-color: #f5c23c;
+$badge-dark-color-scheme-pastel-error-background: #621420;
+$badge-dark-color-scheme-pastel-error-border: #9e0130;
+$badge-dark-color-scheme-pastel-error-color: #fcb2b4;
+$badge-dark-color-scheme-solid-primary-background: #0059b8;
+$badge-dark-color-scheme-solid-primary-border: #0059b8;
+$badge-dark-color-scheme-solid-primary-color: white;
+$badge-dark-color-scheme-solid-info-background: #0c6579;
+$badge-dark-color-scheme-solid-info-border: #0c6579;
+$badge-dark-color-scheme-solid-info-color: white;
+$badge-dark-color-scheme-solid-success-background: #016b37;
+$badge-dark-color-scheme-solid-success-border: #016b37;
+$badge-dark-color-scheme-solid-success-color: white;
+$badge-dark-color-scheme-solid-warning-background: #7e5406;
+$badge-dark-color-scheme-solid-warning-border: #7e5406;
+$badge-dark-color-scheme-solid-warning-color: white;
+$badge-dark-color-scheme-solid-error-background: #b9023a;
+$badge-dark-color-scheme-solid-error-border: #b9023a;
+$badge-dark-color-scheme-solid-error-color: white;
+$badge-dark-color-scheme-solid-transparent-background: transparent;
+$badge-dark-color-scheme-solid-transparent-border: #515e69;
+$badge-dark-color-scheme-solid-transparent-color: white;
+$badge-dark-color-scheme-solid-light-background: #7f8c98;
+$badge-dark-color-scheme-solid-light-border: #7f8c98;
+$badge-dark-color-scheme-solid-light-color: white;
+$badge-dark-color-scheme-solid-second-background: #515e69;
+$badge-dark-color-scheme-solid-second-border: #515e69;
+$badge-dark-color-scheme-solid-second-color: white;
+$badge-size-default-height: 24px;
+$badge-size-default-min-width: 10px;
+$badge-size-default-padding: 0 8px;
+$badge-size-default-border-width: 1px;
+$badge-size-default-border-radius: 4px;
+$badge-size-mini-height: 16px;
+$badge-size-mini-min-width: 10px;
+$badge-size-mini-border-width: 1px;
+$badge-size-mini-border-radius: 2px;
+$badge-size-mini-padding: 0 4px;
+$badge-font-default-default: caption;
+$badge-font-default-caps: caption-caps;
+$badge-font-default-mono: caption-mono;
+$badge-font-mini-default: extra-small-text;
+$badge-font-mini-caps: extra-small-text-caps;
+$badge-font-mini-mono: extra-small-text-mono;
+$button-toggle-size-border-size: 1px;
+$button-toggle-size-border-radius: 4px;
+$button-toggle-size-border-siblings-radius: 0;
+$button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
+$button-light-color-scheme-primary-color: white;
+$button-light-color-scheme-primary-border: #0374eb;
+$button-light-color-scheme-primary-background: #0374eb;
+$button-light-color-scheme-primary-icon: white;
+$button-light-color-scheme-primary-states-active-border: #0059b8;
+$button-light-color-scheme-primary-states-active-background: #0059b8;
+$button-light-color-scheme-primary-transparent-color: #0374eb;
+$button-light-color-scheme-primary-transparent-icon: #5697ff;
+$button-light-color-scheme-primary-transparent-states-hover-color: #0059b8;
+$button-light-color-scheme-primary-transparent-states-hover-icon: #0374eb;
+$button-light-color-scheme-primary-transparent-states-active-color: #014b9d;
+$button-light-color-scheme-primary-transparent-states-active-icon: #014b9d;
+$button-light-color-scheme-second-border: #d7dee4;
+$button-light-color-scheme-second-background: #d7dee4;
+$button-light-color-scheme-second-color: #19252f;
+$button-light-color-scheme-second-icon: #8c99a5;
+$button-light-color-scheme-second-states-active-border: #bdc7d1;
+$button-light-color-scheme-second-states-active-background: #bdc7d1;
+$button-light-color-scheme-error-border: #d7dee4;
+$button-light-color-scheme-error-background: #d7dee4;
+$button-light-color-scheme-error-color: #ea5868;
+$button-light-color-scheme-error-icon: #ea5868;
+$button-light-color-scheme-error-states-active-border: #bdc7d1;
+$button-light-color-scheme-error-states-active-background: #bdc7d1;
+$button-dark-color-scheme-active-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
+$button-dark-color-scheme-primary-color: white;
+$button-dark-color-scheme-primary-border: #0059b8;
+$button-dark-color-scheme-primary-background: #0059b8;
+$button-dark-color-scheme-primary-icon: white;
+$button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
+$button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
+$button-dark-color-scheme-primary-transparent-color: #5697ff;
+$button-dark-color-scheme-primary-transparent-icon: #5697ff;
+$button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
+$button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
+$button-dark-color-scheme-primary-transparent-states-active-color: #023c7f;
+$button-dark-color-scheme-primary-transparent-states-active-icon: #a2c7fe;
+$button-dark-color-scheme-second-border: #515e69;
+$button-dark-color-scheme-second-background: #515e69;
+$button-dark-color-scheme-second-color: #f2f5f9;
+$button-dark-color-scheme-second-icon: #8c99a5;
+$button-dark-color-scheme-second-states-active-border: #333f4a;
+$button-dark-color-scheme-second-states-active-background: #333f4a;
+$button-dark-color-scheme-error-border: #515e69;
+$button-dark-color-scheme-error-background: #515e69;
+$button-dark-color-scheme-error-color: #ea5868;
+$button-dark-color-scheme-error-icon: #ea5868;
+$button-dark-color-scheme-error-states-active-border: #333f4a;
+$button-dark-color-scheme-error-states-active-background: #333f4a;
+$button-size-height: 32px;
+$button-size-border-width: 1px;
+$button-size-border-radius: 4px;
+$button-size-horizontal-padding: 12px;
+$button-font-default: body;
+$button-font-primary: body-strong;
+$button-font-primary-transparent: body;
+$icon-button-size-horizontal-padding: 8px;
+$icon-button-size-left-icon-padding: 6px;
+$card-light-color-scheme-error-vertical-line: #fbd6d6;
+$card-light-color-scheme-error-background: #fff3f3;
+$card-light-color-scheme-error-shadow: #fbd6d6;
+$card-light-color-scheme-warning-vertical-line: #fcdda6;
+$card-light-color-scheme-warning-background: #fff4dd;
+$card-light-color-scheme-warning-shadow: #fcdda6;
+$card-light-color-scheme-success-vertical-line: #b6ebc3;
+$card-light-color-scheme-success-background: #ecf9ef;
+$card-light-color-scheme-success-shadow: #b6ebc3;
+$card-light-color-scheme-info-vertical-line: #afe6f9;
+$card-light-color-scheme-info-background: #ebf8fd;
+$card-light-color-scheme-info-shadow: #afe6f9;
+$card-dark-color-scheme-error-vertical-line: #800025;
+$card-dark-color-scheme-error-background: #500013;
+$card-dark-color-scheme-error-shadow: #800025;
+$card-dark-color-scheme-warning-vertical-line: #543803;
+$card-dark-color-scheme-warning-background: #3e3015;
+$card-dark-color-scheme-warning-shadow: #543803;
+$card-dark-color-scheme-success-vertical-line: #004823;
+$card-dark-color-scheme-success-background: #103920;
+$card-dark-color-scheme-success-shadow: #004823;
+$card-dark-color-scheme-info-vertical-line: #084453;
+$card-dark-color-scheme-info-background: #143641;
+$card-dark-color-scheme-info-shadow: #084453;
+$card-size-vertical-line: 4px;
+$checkbox-light-color-scheme-default-border: #bdc7d1;
+$checkbox-light-color-scheme-default-color: white;
+$checkbox-light-color-scheme-default-background: transparent;
+$checkbox-light-color-scheme-default-states-checked-border: #0374eb;
+$checkbox-light-color-scheme-default-states-checked-background: #0374eb;
+$checkbox-light-color-scheme-default-states-focused-border: #0374eb;
+$checkbox-light-color-scheme-default-states-focused-shadow: 0 0 0 1px #0374eb;
+$checkbox-light-color-scheme-default-states-checked-focused-border: #0374eb;
+$checkbox-light-color-scheme-default-states-checked-focused-background: #0374eb;
+$checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0374eb;
+$checkbox-light-color-scheme-default-states-checked-focused-outline: 1px solid white;
+$checkbox-light-color-scheme-error-border: #db3c55;
+$checkbox-light-color-scheme-error-color: white;
+$checkbox-light-color-scheme-error-background: transparent;
+$checkbox-light-color-scheme-error-states-checked-border: #db3c55;
+$checkbox-light-color-scheme-error-states-checked-background: #db3c55;
+$checkbox-light-color-scheme-error-states-focused-border: #db3c55;
+$checkbox-light-color-scheme-error-states-focused-shadow: 0 0 0 1px #db3c55;
+$checkbox-light-color-scheme-error-states-checked-focused-border: #db3c55;
+$checkbox-light-color-scheme-error-states-checked-focused-background: #db3c55;
+$checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3c55;
+$checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid white;
+$checkbox-dark-color-scheme-default-border: #515e69;
+$checkbox-dark-color-scheme-default-color: white;
+$checkbox-dark-color-scheme-default-background: transparent;
+$checkbox-dark-color-scheme-default-states-checked-border: #0059b8;
+$checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
+$checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
+$checkbox-dark-color-scheme-default-states-focused-shadow: 0 0 0 1px #4187ff;
+$checkbox-dark-color-scheme-default-states-checked-focused-border: #4187ff;
+$checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
+$checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #4187ff;
+$checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
+$checkbox-dark-color-scheme-error-border: #b9023a;
+$checkbox-dark-color-scheme-error-color: white;
+$checkbox-dark-color-scheme-error-background: transparent;
+$checkbox-dark-color-scheme-error-states-checked-border: #b9023a;
+$checkbox-dark-color-scheme-error-states-checked-background: #b9023a;
+$checkbox-dark-color-scheme-error-states-focused-border: #b9023a;
+$checkbox-dark-color-scheme-error-states-focused-shadow: 0 0 0 1px #b9023a;
+$checkbox-dark-color-scheme-error-states-checked-focused-border: #b9023a;
+$checkbox-dark-color-scheme-error-states-checked-focused-background: #b9023a;
+$checkbox-dark-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #b9023a;
+$checkbox-dark-color-scheme-error-states-checked-focused-outline: 1px solid #19252f;
+$checkbox-size-width: 16px;
+$checkbox-size-label-margin: 8px;
+$checkbox-size-border-width: 1px;
+$checkbox-size-border-radius: 4px;
+$checkbox-size-toggle-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
+$checkbox-font-default: body;
+$datepicker-toggle-size-width: 30px;
+$datepicker-toggle-size-height: 30px;
+$datepicker-body-light-color-scheme-states-selected-color: #0374eb;
+$datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
+$datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
+$datepicker-body-dark-color-scheme-states-selected-background: rgba(3, 116, 235, 0.3);
+$datepicker-body-size-label-paddings: 8px 28px 12px 12px;
+$datepicker-body-size-cell-min-size: 32px;
+$datepicker-body-size-cell-margin: 5%;
+$datepicker-body-size-cell-padding: 8px;
+$datepicker-body-size-cell-border-width: 1px;
+$datepicker-body-font-label: body-strong;
+$datepicker-body-font-today: body-strong;
+$datepicker-calendar-size-padding-top: 16px;
+$datepicker-calendar-size-padding-horizontal: 8px;
+$datepicker-calendar-size-padding-bottom: 8px;
+$datepicker-calendar-size-padding-blocks: 12px;
+$datepicker-calendar-size-divider-width: 1px;
+$datepicker-calendar-size-icon-border-width: 2px;
+$datepicker-calendar-size-icon-prev-icon-transform: translateX(2px) rotate(-45deg);
+$datepicker-calendar-size-icon-nex-icon-transform: translateX(-2px) rotate(45deg);
+$datepicker-calendar-font-default: body;
+$datepicker-calendar-font-header: caption;
+$datepicker-input-size-width: 130px;
+$divider-light-color-scheme-color: #d7dee4;
+$divider-dark-color-scheme-color: mix(#515e69, transparent, 50%);
+$divider-size-width: 1px;
+$divider-size-inset-margin: 80px;
+$description-list-light-color-scheme-dt: #6d7a86;
+$description-list-light-color-scheme-dd: #19252f;
+$description-list-dark-color-scheme-dt: #8c99a5;
+$description-list-dark-color-scheme-dd: #d7dee4;
+$description-list-size-grid-template-columns: repeat(4, 1fr);
+$description-list-size-dt-grid-column: 1;
+$description-list-size-dd-grid-column: 2 / span 3;
+$description-list-size-horizontal-column-gap: 16px;
+$description-list-size-horizontal-row-gap: 12px;
+$description-list-size-vertical-column-gap: 0;
+$description-list-size-vertical-row-gap: 2px;
+$description-list-size-vertical-dd-margin-bottom: 16px;
+$description-list-font-horizontal-dt: body;
+$description-list-font-horizontal-dd: body;
+$description-list-font-vertical-dt: caption;
+$description-list-font-vertical-dd: body;
+$dropdown-item-size-padding: 5px 15px;
+$dropdown-item-size-icon-padding: 0 8px 2px 0;
+$dropdown-item-font-default: body;
+$dropdown-item-font-caption: caption;
+$dropdown-group-header-size-default-padding: 6px 15px;
+$dropdown-group-header-size-small-padding: 8px 15px;
+$dropdown-group-header-font-default: body-strong;
+$dropdown-group-header-font-small: caption-caps;
+$dropdown-divider-size-height: 1px;
+$dropdown-divider-size-margin: 4px 0;
+$dropdown-trigger-size-button-right-padding: 8px;
+$dropdown-trigger-size-right-icon-padding: 2px;
+$dropdown-panel-size-max-width: 640px;
+$dropdown-panel-size-padding: 4px 0;
+$dropdown-panel-size-border-width: 1px;
+$dropdown-panel-size-border-radius: 4px;
+$form-field-light-color-scheme-border: #bdc7d1;
+$form-field-light-color-scheme-background: white;
+$form-field-light-color-scheme-states-hover-border: #8c99a5;
+$form-field-light-color-scheme-states-invalid-border: #db3c55;
+$form-field-light-color-scheme-states-invalid-background: #fff3f3;
+$form-field-dark-color-scheme-border: #515e69;
+$form-field-dark-color-scheme-background: transparent;
+$form-field-dark-color-scheme-states-hover-border: #6d7a86;
+$form-field-dark-color-scheme-states-invalid-border: #b9023a;
+$form-field-dark-color-scheme-states-invalid-background: mix(#41000b, transparent, 30%);
+$form-field-size-height: 32px;
+$form-field-size-border-width: 1px;
+$form-field-size-border-radius: 4px;
+$form-field-size-button-width: 32px;
+$form-field-font-default: body;
+$form-field-hint-size-margin-top: 4px;
+$form-field-hint-font-default: caption;
+$form-field-password-hint-light-color-scheme-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-icon-color: #8c99a5;
+$form-field-password-hint-light-color-scheme-states-invalid-icon-color: #ee6f79;
+$form-field-password-hint-light-color-scheme-states-invalid-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-valid-text-color: #016b37;
+$form-field-password-hint-light-color-scheme-states-valid-icon-color: #4ba96c;
+$form-field-password-hint-dark-color-scheme-text-color: #d7dee4;
+$form-field-password-hint-dark-color-scheme-icon-color: #8c99a5;
+$form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ee6f79;
+$form-field-password-hint-dark-color-scheme-states-invalid-text-color: #d7dee4;
+$form-field-password-hint-dark-color-scheme-states-valid-text-color: #4ba96c;
+$form-field-password-hint-dark-color-scheme-states-valid-icon-color: #4ba96c;
+$form-field-password-hint-size-margin-top: 8px;
+$form-field-password-hint-size-icon-margin: 4px;
+$form-field-password-hint-font-default: caption;
+$forms-light-color-scheme-label: #6d7a86;
+$forms-light-color-scheme-legend: #19252f;
+$forms-dark-color-scheme-label: #8c99a5;
+$forms-dark-color-scheme-legend: #d7dee4;
+$forms-size-horizontal-row-margin-bottom: 20px;
+$forms-size-horizontal-control-padding-left: 16px;
+$forms-size-horizontal-legend-margin-top: 32px;
+$forms-size-horizontal-legend-margin-bottom: 16px;
+$forms-size-vertical-row-margin-bottom: 16px;
+$forms-size-vertical-label-padding-top: 0;
+$forms-size-vertical-label-padding-bottom: 4px;
+$forms-size-vertical-control-padding-left: 24px;
+$forms-size-vertical-legend-margin-top: 32px;
+$forms-size-vertical-legend-margin-bottom: 12px;
+$forms-font-default-label: body;
+$forms-font-default-legend: subheading;
+$icon-light-color-scheme-secondary-default: #8c99a5;
+$icon-light-color-scheme-secondary-states-hover: #6d7a86;
+$icon-light-color-scheme-secondary-states-active: #434f5a;
+$icon-light-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
+$icon-light-color-scheme-primary-default: #5697ff;
+$icon-light-color-scheme-primary-states-hover: #0374eb;
+$icon-light-color-scheme-primary-states-active: #014b9d;
+$icon-light-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-light-color-scheme-info-default: #18a5c5;
+$icon-light-color-scheme-info-states-hover: #218ca8;
+$icon-light-color-scheme-info-states-active: #0c5567;
+$icon-light-color-scheme-info-states-disabled: mix(#18a5c5, transparent, 30%);
+$icon-light-color-scheme-success-default: #4ba96c;
+$icon-light-color-scheme-success-states-hover: #028b49;
+$icon-light-color-scheme-success-states-active: #015a2d;
+$icon-light-color-scheme-success-states-disabled: mix(#4ba96c, transparent, 30%);
+$icon-light-color-scheme-warning-default: #e19f12;
+$icon-light-color-scheme-warning-states-hover: #a26e0c;
+$icon-light-color-scheme-warning-states-active: #6b4804;
+$icon-light-color-scheme-warning-states-disabled: mix(#e19f12, transparent, 30%);
+$icon-light-color-scheme-error-default: #ee6f79;
+$icon-light-color-scheme-error-states-hover: #db3c55;
+$icon-light-color-scheme-error-states-active: #9e0130;
+$icon-light-color-scheme-error-states-disabled: mix(#ee6f79, transparent, 30%);
+$icon-dark-color-scheme-secondary-default: #8c99a5;
+$icon-dark-color-scheme-secondary-states-hover: #6d7a86;
+$icon-dark-color-scheme-secondary-states-active: #bdc7d1;
+$icon-dark-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
+$icon-dark-color-scheme-primary-default: #5697ff;
+$icon-dark-color-scheme-primary-states-hover: #0374eb;
+$icon-dark-color-scheme-primary-states-active: #a2c7fe;
+$icon-dark-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-dark-color-scheme-info-default: #18a5c5;
+$icon-dark-color-scheme-info-states-hover: #218ca8;
+$icon-dark-color-scheme-info-states-active: #6ed3f2;
+$icon-dark-color-scheme-info-states-disabled: mix(#18a5c5, transparent, 30%);
+$icon-dark-color-scheme-success-default: #4ba96c;
+$icon-dark-color-scheme-success-states-hover: #028b49;
+$icon-dark-color-scheme-success-states-active: #8ed5a1;
+$icon-dark-color-scheme-success-states-disabled: mix(#4ba96c, transparent, 30%);
+$icon-dark-color-scheme-warning-default: #e19f12;
+$icon-dark-color-scheme-warning-states-hover: #a26e0c;
+$icon-dark-color-scheme-warning-states-active: #f5c23c;
+$icon-dark-color-scheme-warning-states-disabled: mix(#e19f12, transparent, 30%);
+$icon-dark-color-scheme-error-default: #ee6f79;
+$icon-dark-color-scheme-error-states-hover: #db3c55;
+$icon-dark-color-scheme-error-states-active: #fcb2b4;
+$icon-dark-color-scheme-error-states-disabled: mix(#ee6f79, transparent, 30%);
+$input-size-padding: 0 12px;
+$input-size-width: 100%;
+$input-font-default: body;
+$input-font-monospace: body-mono;
+$link-light-color-scheme-text: #0374eb;
+$link-light-color-scheme-border-bottom: rgba(#0374eb, 0.32);
+$link-light-color-scheme-state-visited-text: #864775;
+$link-light-color-scheme-state-visited-border-bottom: rgba(#864775, 0.32);
+$link-light-color-scheme-state-hover-text: #0059b8;
+$link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
+$link-light-color-scheme-state-active: #014b9d;
+$link-light-color-scheme-state-focused-outline: #0374eb;
+$link-dark-color-scheme-text: #5697ff;
+$link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
+$link-dark-color-scheme-state-visited-text: #bb78a7;
+$link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
+$link-dark-color-scheme-state-hover-text: #4187ff;
+$link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
+$link-dark-color-scheme-state-active: #0374eb;
+$link-dark-color-scheme-state-focused-outline: #4187ff;
+$link-size-icon-margin: 4px;
+$link-size-state-focused-outline-offset: 2px;
+$link-size-state-focused-outline-width: 2px;
+$link-font-default: body;
+$list-size-horizontal-padding: 12px;
+$list-size-icon-right-margin: 8px;
+$list-size-item-height: 32px;
+$list-font-item: body;
+$loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
+$loader-overlay-light-color-scheme-text: #19252f;
+$loader-overlay-light-color-scheme-caption: #6d7a86;
+$loader-overlay-dark-color-scheme-background: mix(#19252f, transparent, 90%);
+$loader-overlay-dark-color-scheme-text: #d7dee4;
+$loader-overlay-dark-color-scheme-caption: #8c99a5;
+$loader-overlay-size-text-max-width: 480px;
+$loader-overlay-size-fixed-top-padding: 72px;
+$loader-overlay-size-center-optical-compensation: -40%;
+$loader-overlay-font-text: body;
+$loader-overlay-font-caption: caption;
+$markdown-h1-light-color-scheme-color: #19252f;
+$markdown-h1-dark-color-scheme-color: #d7dee4;
+$markdown-h1-size-max-width: 650px;
+$markdown-h1-size-margin-top: 0;
+$markdown-h1-size-margin-bottom: 16px;
+$markdown-h1-font-default: md-h1;
+$markdown-h2-light-color-scheme-color: #19252f;
+$markdown-h2-dark-color-scheme-color: #d7dee4;
+$markdown-h2-size-max-width: 650px;
+$markdown-h2-size-margin-top: 24px;
+$markdown-h2-size-margin-bottom: 12px;
+$markdown-h2-font-default: md-h2;
+$markdown-h3-light-color-scheme-color: #19252f;
+$markdown-h3-dark-color-scheme-color: #d7dee4;
+$markdown-h3-size-max-width: 650px;
+$markdown-h3-size-margin-top: 24px;
+$markdown-h3-size-margin-bottom: 12px;
+$markdown-h3-font-default: md-h3;
+$markdown-h4-light-color-scheme-color: #19252f;
+$markdown-h4-dark-color-scheme-color: #d7dee4;
+$markdown-h4-size-max-width: 650px;
+$markdown-h4-size-margin-top: 24px;
+$markdown-h4-size-margin-bottom: 12px;
+$markdown-h4-font-default: md-h4;
+$markdown-h5-light-color-scheme-color: #19252f;
+$markdown-h5-dark-color-scheme-color: #d7dee4;
+$markdown-h5-size-max-width: 650px;
+$markdown-h5-size-margin-top: 24px;
+$markdown-h5-size-margin-bottom: 8px;
+$markdown-h5-font-default: md-h5;
+$markdown-h6-light-color-scheme-color: #19252f;
+$markdown-h6-dark-color-scheme-color: #d7dee4;
+$markdown-h6-size-max-width: 650px;
+$markdown-h6-size-margin-top: 24px;
+$markdown-h6-size-margin-bottom: 8px;
+$markdown-h6-font-default: md-h6;
+$markdown-p-light-color-scheme-color: #19252f;
+$markdown-p-dark-color-scheme-color: #d7dee4;
+$markdown-p-size-max-width: 650px;
+$markdown-p-size-margin-top: 12px;
+$markdown-p-size-margin-bottom: 12px;
+$markdown-p-font-default: md-body;
+$markdown-list-light-color-scheme-color: #19252f;
+$markdown-list-dark-color-scheme-color: #d7dee4;
+$markdown-list-size-max-width: 650px;
+$markdown-list-size-margin-top: 12px;
+$markdown-list-size-margin-bottom: 12px;
+$markdown-list-size-margin-top-after-paragraph: -8px;
+$markdown-list-size-ol-number-padding-right: 4px;
+$markdown-list-size-ul-padding: 0 0 0 24px;
+$markdown-list-size-item-margin-bottom: 4px;
+$markdown-list-font-default: md-body;
+$markdown-blockquote-light-color-scheme-text: #19252f;
+$markdown-blockquote-light-color-scheme-line: #bdc7d1;
+$markdown-blockquote-light-color-scheme-background: transparent;
+$markdown-blockquote-light-color-scheme-border: transparent;
+$markdown-blockquote-dark-color-scheme-text: #d7dee4;
+$markdown-blockquote-dark-color-scheme-line: #515e69;
+$markdown-blockquote-dark-color-scheme-background: transparent;
+$markdown-blockquote-dark-color-scheme-border: transparent;
+$markdown-blockquote-size-max-width: 650px;
+$markdown-blockquote-size-margin-top: 12px;
+$markdown-blockquote-size-margin-bottom: 12px;
+$markdown-blockquote-size-padding: 2px 12px;
+$markdown-blockquote-size-line-width: 4px;
+$markdown-blockquote-size-border-radius: 0;
+$markdown-blockquote-size-border-width: 0;
+$markdown-blockquote-font-default: md-body;
+$markdown-code-light-color-scheme-text: #19252f;
+$markdown-code-light-color-scheme-background: #f2f5f9;
+$markdown-code-light-color-scheme-border: #d7dee4;
+$markdown-code-dark-color-scheme-text: #d7dee4;
+$markdown-code-dark-color-scheme-background: #27333e;
+$markdown-code-dark-color-scheme-border: mix(#515e69, transparent, 50%);
+$markdown-code-size-max-width: 650px;
+$markdown-code-size-multiline-margin-top: 12px;
+$markdown-code-size-multiline-margin-bottom: 24px;
+$markdown-code-size-inline-padding: 1px 4px;
+$markdown-code-size-multiline-padding: 12px 16px;
+$markdown-code-size-border-radius: 4px;
+$markdown-code-size-border-width: 1px;
+$markdown-code-font-default: md-body-mono;
+$markdown-link-light-color-scheme-text: #0374eb;
+$markdown-link-light-color-scheme-border-bottom: rgba(#0374eb, 0.32);
+$markdown-link-light-color-scheme-state-visited-text: #864775;
+$markdown-link-light-color-scheme-state-visited-border-bottom: rgba(#864775, 0.32);
+$markdown-link-light-color-scheme-state-hover-text: #0059b8;
+$markdown-link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
+$markdown-link-light-color-scheme-state-active: #014b9d;
+$markdown-link-light-color-scheme-state-focused-outline: #0374eb;
+$markdown-link-dark-color-scheme-text: #5697ff;
+$markdown-link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
+$markdown-link-dark-color-scheme-state-visited-text: #bb78a7;
+$markdown-link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
+$markdown-link-dark-color-scheme-state-hover-text: #4187ff;
+$markdown-link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
+$markdown-link-dark-color-scheme-state-active: #0374eb;
+$markdown-link-dark-color-scheme-state-focused-outline: #4187ff;
+$markdown-link-size-icon-margin: 4px;
+$markdown-link-size-state-focused-outline-offset: 2px;
+$markdown-link-size-state-focused-outline-width: 2px;
+$markdown-link-font-default: md-body;
+$markdown-image-light-color-scheme-caption-text: #6d7a86;
+$markdown-image-dark-color-scheme-caption-text: #8c99a5;
+$markdown-image-size-max-width: 650px;
+$markdown-image-size-margin-top: 12px;
+$markdown-image-size-margin-bottom: 12px;
+$markdown-image-size-caption-margin-top: -8px;
+$markdown-image-size-caption-margin-bottom: 24px;
+$markdown-image-font-caption: md-caption;
+$markdown-hr-light-color-scheme-color: #d7dee4;
+$markdown-hr-dark-color-scheme-color: mix(#515e69, transparent, 50%);
+$markdown-hr-size-width: 1px;
+$markdown-hr-size-margin-vertical: 24px;
+$markdown-table-light-color-scheme-header: #6d7a86;
+$markdown-table-light-color-scheme-body: #19252f;
+$markdown-table-light-color-scheme-border: #d7dee4;
+$markdown-table-dark-color-scheme-header: #8c99a5;
+$markdown-table-dark-color-scheme-body: #d7dee4;
+$markdown-table-dark-color-scheme-border: mix(#515e69, transparent, 50%);
+$markdown-table-size-border-width: 1px;
+$markdown-table-size-padding: 8px;
+$markdown-table-size-margin-bottom: 12px;
+$markdown-table-font-header: md-table-header;
+$markdown-table-font-body: md-table-cell;
+$markdown-size-max-width: 650px;
+$markdown-font-default: md-body;
+$modal-light-color-scheme-shadow: (0 0 0 1px #d7dee4, 0 6px 12px 0 rgba(39, 51, 62, 0.5));
+$modal-light-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.16);
+$modal-light-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(39, 51, 62, 0.16);
+$modal-light-color-scheme-background-mask: rgba(39, 51, 62, 0.5);
+$modal-dark-color-scheme-shadow: (0 0 0 1px #19252f, 0 6px 12px 0 rgba(0, 0, 0, 0.5));
+$modal-dark-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
+$modal-dark-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
+$modal-dark-color-scheme-background-mask: rgba(0, 0, 0, 0.5);
+$modal-size-small: 400px;
+$modal-size-normal: 640px;
+$modal-size-large: 960px;
+$modal-size-top: 48px;
+$modal-size-close-width: 56px;
+$modal-size-border-radius: 4px;
+$modal-size-border-width: 1px;
+$modal-header-light-color-scheme-border: #d7dee4;
+$modal-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
+$modal-header-size-border-radius: 4px 4px 0 0;
+$modal-header-size-height: 56px;
+$modal-header-size-padding: 0 16px;
+$modal-header-font-default: title;
+$modal-body-size-max-height: calc(100vh - 260px);
+$modal-body-size-padding: 16px 24px 24px;
+$modal-body-font-default: body;
+$modal-footer-light-color-scheme-border: #f2f5f9;
+$modal-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
+$modal-footer-size-border-radius: 0 0 4px 4px;
+$modal-footer-size-height: 64px;
+$modal-footer-size-padding: 0 16px;
+$modal-confirm-size-padding: 24px;
+$navbar-light-color-scheme-background: #19252f;
+$navbar-light-color-scheme-divider-background: #515e69;
+$navbar-dark-color-scheme-background: #333f4a;
+$navbar-dark-color-scheme-divider-background: #515e69;
+$navbar-size-icon-margin: 6px;
+$navbar-size-right-icon-margin: 2px;
+$navbar-font-title: body;
+$vertical-navbar-size-states-expanded-width: 240px;
+$vertical-navbar-size-states-collapsed-width: 56px;
+$vertical-navbar-size-icon-margin: 16px;
+$navbar-item-light-color-scheme-text: #f2f5f9;
+$navbar-item-light-color-scheme-icon: #bdc7d1;
+$navbar-item-light-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-light-color-scheme-states-selected: #333f4a;
+$navbar-item-light-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
+$navbar-item-light-color-scheme-states-progress: #333f4a;
+$navbar-item-light-color-scheme-states-disabled-opacity: 0.3;
+$navbar-item-dark-color-scheme-text: #f2f5f9;
+$navbar-item-dark-color-scheme-icon: #bdc7d1;
+$navbar-item-dark-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-dark-color-scheme-states-selected: #434f5a;
+$navbar-item-dark-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
+$navbar-item-dark-color-scheme-states-progress: #333f4a;
+$navbar-item-dark-color-scheme-states-disabled-opacity: 0.3;
+$navbar-item-size-padding: 16px;
+$navbar-item-size-height: 48px;
+$navbar-item-size-height-vertical: 56px;
+$navbar-brand-size-padding: 12px;
+$navbar-brand-size-margin-right: 24px;
+$navbar-brand-font-title: title;
+$optgroup-size-padding-left: 17px;
+$optgroup-font-default: subheading;
+$option-size-horizontal-padding: 12px;
+$option-size-height: 32px;
+$option-size-border-width: 2px;
+$option-font-default: body;
+$popover-light-color-scheme-background: white;
+$popover-light-color-scheme-text: #19252f;
+$popover-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
+$popover-light-color-scheme-border: #d7dee4;
+$popover-dark-color-scheme-background: #333f4a;
+$popover-dark-color-scheme-text: #d7dee4;
+$popover-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+$popover-dark-color-scheme-border: #333f4a;
+$popover-size-max-height: 480px;
+$popover-size-padding: 16px;
+$popover-size-border-radius: 4px;
+$popover-size-border-width: 1px;
+$popover-size-arrow-size: 12px;
+$popover-size-trigger-margin: 9px;
+$popover-size-small-width: 200px;
+$popover-size-normal-width: 400px;
+$popover-size-large-width: 640px;
+$popover-font-default: body;
+$popover-header-light-color-scheme-border: #d7dee4;
+$popover-header-light-color-scheme-text: #19252f;
+$popover-header-light-color-scheme-background: white;
+$popover-header-dark-color-scheme-border: #434f5a;
+$popover-header-dark-color-scheme-text: #d7dee4;
+$popover-header-dark-color-scheme-background: #333f4a;
+$popover-header-size-height: 40px;
+$popover-header-size-padding: 0 16px;
+$popover-header-font-default: subheading;
+$popover-footer-light-color-scheme-border: #f2f5f9;
+$popover-footer-light-color-scheme-background: #f2f5f9;
+$popover-footer-dark-color-scheme-border: #434f5a;
+$popover-footer-dark-color-scheme-background: #333f4a;
+$popover-footer-size-margin-top: 8px;
+$popover-footer-size-padding: 12px 16px;
+$popover-footer-size-height: 56px;
+$popover-footer-font-default: body;
+$popup-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
+$popup-light-color-scheme-border: #d7dee4;
+$popup-light-color-scheme-background: white;
+$popup-light-color-scheme-footer-background: #f2f5f9;
+$popup-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+$popup-dark-color-scheme-border: #333f4a;
+$popup-dark-color-scheme-background: #333f4a;
+$popup-dark-color-scheme-footer-background: transparent;
+$progress-bar-light-color-scheme-background: rgba(25, 37, 47, 0.06);
+$progress-bar-dark-color-scheme-background: rgba(white,0.06);
+$progress-bar-size-height: 4px;
+$progress-spinner-size-default-size: 16px;
+$progress-spinner-size-default-svg-circle-radius: 42.5%;
+$progress-spinner-size-default-svg-stroke-width: 13%;
+$progress-spinner-size-large-size: 48px;
+$progress-spinner-size-large-svg-circle-radius: 47%;
+$progress-spinner-size-large-svg-stroke-width: 6%;
+$radio-light-color-scheme-outer-circle-border: #bdc7d1;
+$radio-light-color-scheme-inner-circle-border: transparent;
+$radio-light-color-scheme-cap-color: white;
+$radio-light-color-scheme-states-checked-outer-circle-border: #0374eb;
+$radio-light-color-scheme-states-checked-inner-circle-border: #0374eb;
+$radio-light-color-scheme-states-focused-outer-circle-border: #0374eb;
+$radio-light-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #0374eb;
+$radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px white;
+$radio-dark-color-scheme-outer-circle-border: #515e69;
+$radio-dark-color-scheme-inner-circle-border: transparent;
+$radio-dark-color-scheme-cap-color: white;
+$radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
+$radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
+$radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
+$radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
+$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
+$radio-size-outer-size: 14px;
+$radio-size-inner-size: 10px;
+$radio-size-cap-size: 6px;
+$radio-size-label-margin: 8px;
+$radio-font-default: body;
+$select-size-left-padding: 12px;
+$select-size-right-padding: 6px;
+$select-size-left-padding-multiple: 12px;
+$select-font-default: body;
+$select-panel-size-max-height: 232px;
+$select-panel-size-max-width: 640px;
+$select-panel-size-vertical-padding: 4px;
+$select-panel-size-border-width: 1px;
+$select-panel-size-border-radius: 4px;
+$select-panel-font-default: body;
+$sidepanel-light-color-scheme-border: #bdc7d1;
+$sidepanel-dark-color-scheme-border: #19252f;
+$sidepanel-font-default: body;
+$sidepanel-header-light-color-scheme-border: #d7dee4;
+$sidepanel-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
+$sidepanel-header-size-height: 56px;
+$sidepanel-header-size-padding: 0 16px;
+$sidepanel-header-size-close-padding: 0 0 0 8px;
+$sidepanel-header-font-default: title;
+$sidepanel-footer-light-color-scheme-border: #f2f5f9;
+$sidepanel-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
+$sidepanel-footer-size-height: 64px;
+$sidepanel-footer-size-padding: 0 16px;
+$sidepanel-footer-font-default: body;
+$table-size-border-width: 1px;
+$table-size-row-padding-vertical: 8px;
+$table-size-row-padding-horizontal: 16px;
+$table-font-header: caption;
+$table-font-body: body-tabular;
+$tabs-light-color-scheme-border: #d7dee4;
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #6d7a86;
+$tabs-light-color-scheme-state-hover-text: #19252f;
+$tabs-light-color-scheme-state-active-marker-color: #0374eb;
+$tabs-light-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
+$tabs-light-color-scheme-state-empty-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-icon: mix(#8c99a5, transparent, 30%);
+$tabs-light-color-scheme-state-disabled-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
+$tabs-dark-color-scheme-border: #333f4a;
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #d7dee4;
+$tabs-dark-color-scheme-state-hover-icon: #6d7a86;
+$tabs-dark-color-scheme-state-hover-text: #d7dee4;
+$tabs-dark-color-scheme-state-active-marker-color: #0059b8;
+$tabs-dark-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: mix(#8c99a5, transparent, 30%);
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
+$tabs-size-height: 40px;
+$tabs-size-highlight-height: 4px;
+$tabs-size-padding-horizontal: 16px;
+$tabs-size-border-width: 1px;
+$tabs-size-border-radius: 4px;
+$tabs-size-label-icon-margin: 8px;
+$tabs-font-default: body;
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
+$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
+$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
+$vertical-tabs-dark-color-scheme-state-selected-background: rgba(3, 116, 235, 0.3);
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(white, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(rgba(3, 116, 235, 0.3), $lightness:-1%);
+$tags-light-color-scheme-primary-background: #e7f1ff;
+$tags-light-color-scheme-primary-border: transparent;
+$tags-light-color-scheme-primary-text: #0374eb;
+$tags-light-color-scheme-primary-icon: #5697ff;
+$tags-light-color-scheme-primary-states-hover-icon: #0374eb;
+$tags-light-color-scheme-primary-states-focused: #0374eb;
+$tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
+$tags-light-color-scheme-primary-states-disabled-background: mix(#0374eb, transparent, 10%);
+$tags-light-color-scheme-primary-states-disabled-border: transparent;
+$tags-light-color-scheme-second-background: #d7dee4;
+$tags-light-color-scheme-second-border: transparent;
+$tags-light-color-scheme-second-text: #19252f;
+$tags-light-color-scheme-second-icon: #8c99a5;
+$tags-light-color-scheme-second-states-hover-icon: #6d7a86;
+$tags-light-color-scheme-second-states-focused: #0374eb;
+$tags-light-color-scheme-second-states-disabled-text: mix(#8c99a5, transparent, 50%);
+$tags-light-color-scheme-second-states-disabled-background: mix(#8c99a5, transparent, 10%);
+$tags-light-color-scheme-second-states-disabled-border: transparent;
+$tags-light-color-scheme-error-background: #ffeaea;
+$tags-light-color-scheme-error-border: transparent;
+$tags-light-color-scheme-error-text: #db3c55;
+$tags-light-color-scheme-error-icon: #ee6f79;
+$tags-light-color-scheme-error-states-hover-icon: #db3c55;
+$tags-light-color-scheme-error-states-focused: #db3c55;
+$tags-light-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
+$tags-light-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
+$tags-light-color-scheme-error-states-disabled-border: transparent;
+$tags-dark-color-scheme-primary-background: #014b9d;
+$tags-dark-color-scheme-primary-border: transparent;
+$tags-dark-color-scheme-primary-text: #a2c7fe;
+$tags-dark-color-scheme-primary-icon: #5697ff;
+$tags-dark-color-scheme-primary-states-hover-icon: #0374eb;
+$tags-dark-color-scheme-primary-states-focused: #4187ff;
+$tags-dark-color-scheme-primary-states-disabled-text: mix(#5697ff, transparent, 50%);
+$tags-dark-color-scheme-primary-states-disabled-background: mix(#5697ff, transparent, 10%);
+$tags-dark-color-scheme-primary-states-disabled-border: transparent;
+$tags-dark-color-scheme-second-background: #333f4a;
+$tags-dark-color-scheme-second-border: transparent;
+$tags-dark-color-scheme-second-text: #bdc7d1;
+$tags-dark-color-scheme-second-icon: #8c99a5;
+$tags-dark-color-scheme-second-states-hover-icon: #6d7a86;
+$tags-dark-color-scheme-second-states-focused: #4187ff;
+$tags-dark-color-scheme-second-states-disabled-text: mix(#7f8c98, transparent, 50%);
+$tags-dark-color-scheme-second-states-disabled-background: mix(#7f8c98, transparent, 10%);
+$tags-dark-color-scheme-second-states-disabled-border: transparent;
+$tags-dark-color-scheme-error-background: #800025;
+$tags-dark-color-scheme-error-border: transparent;
+$tags-dark-color-scheme-error-text: #fcb2b4;
+$tags-dark-color-scheme-error-icon: #ee6f79;
+$tags-dark-color-scheme-error-states-hover-icon: #db3c55;
+$tags-dark-color-scheme-error-states-focused: #b9023a;
+$tags-dark-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
+$tags-dark-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
+$tags-dark-color-scheme-error-states-disabled-border: transparent;
+$tags-size-margin: 2px;
+$tags-size-height: 24px;
+$tags-size-border-width: 1px;
+$tags-size-border-radius: 4px;
+$tags-size-icon-padding: 4px;
+$tags-size-text-margin: 8px;
+$tags-font-default: caption;
+$tags-font-mono: caption-mono;
+$tags-font-caps: caption-caps;
+$tag-list-size-padding: 1px 12px;
+$tag-input-size-height: 22px;
+$tag-input-size-margin: 2px 4px;
+$tag-input-font-default: body;
+$textarea-size-min-height: 50px;
+$textarea-size-padding: 5px 12px;
+$textarea-font-default: body;
+$textarea-font-mono: body-mono;
+$timepicker-size-padding-right: 16px;
+$timezone-option-light-color-scheme-text: #19252f;
+$timezone-option-light-color-scheme-caption: #6d7a86;
+$timezone-option-dark-color-scheme-text: #d7dee4;
+$timezone-option-dark-color-scheme-caption: #8c99a5;
+$timezone-option-size-padding: 6px 8px 6px 14px;
+$timezone-option-size-column-gap: 16px;
+$timezone-option-size-height: auto;
+$timezone-option-size-max-height: 4em;
+$timezone-option-font-text: body;
+$timezone-option-font-offset-text: body-tabular;
+$timezone-option-font-caption: caption;
+$toast-light-color-scheme-background: white;
+$toast-light-color-scheme-border: #bdc7d1;
+$toast-light-color-scheme-text: #19252f;
+$toast-light-color-scheme-text-caption: #6d7a86;
+$toast-light-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-light-color-scheme-icon-info: #18a5c5;
+$toast-light-color-scheme-icon-error: #ee6f79;
+$toast-light-color-scheme-icon-success: #4ba96c;
+$toast-light-color-scheme-icon-warning: #e19f12;
+$toast-dark-color-scheme-background: #333f4a;
+$toast-dark-color-scheme-border: rgba(25, 37, 47, 0.1);
+$toast-dark-color-scheme-text: #d7dee4;
+$toast-dark-color-scheme-text-caption: #8c99a5;
+$toast-dark-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-dark-color-scheme-icon-info: #18a5c5;
+$toast-dark-color-scheme-icon-error: #ee6f79;
+$toast-dark-color-scheme-icon-success: #4ba96c;
+$toast-dark-color-scheme-icon-warning: #e19f12;
+$toast-size-border-width: 1px;
+$toast-size-border-radius: 3px;
+$toast-size-width: 360px;
+$toast-size-padding-vertical: 12px;
+$toast-size-padding-left: 12px;
+$toast-size-padding-right: 16px;
+$toast-size-close-button-width: 32px;
+$toast-size-close-button-margin: 8px;
+$toast-size-icon-margin: 8px;
+$toast-size-caption-margin: 8px;
+$toast-size-actionbar-margin: 8px;
+$toast-size-actionbar-gap: 12px;
+$toast-size-vertical-margin: 16px;
+$toast-size-horizontal-margin: 16px;
+$toast-size-gap: 12px;
+$toast-font-title: body;
+$toast-font-caption: body;
+$toggle-light-color-scheme-border: #bdc7d1;
+$toggle-light-color-scheme-background: white;
+$toggle-light-color-scheme-circle-border: #bdc7d1;
+$toggle-light-color-scheme-circle-background: #d7dee4;
+$toggle-light-color-scheme-states-focused-shadow: inset 0 0 0 1px white, 0 0 0 2px #0374eb;
+$toggle-light-color-scheme-primary-checked-border-color: #0374eb;
+$toggle-light-color-scheme-primary-checked-background: #0374eb;
+$toggle-light-color-scheme-error-checked-border-color: #db3c55;
+$toggle-light-color-scheme-error-checked-background: #db3c55;
+$toggle-dark-color-scheme-border: #515e69;
+$toggle-dark-color-scheme-background: #19252f;
+$toggle-dark-color-scheme-circle-border: #515e69;
+$toggle-dark-color-scheme-circle-background: #6d7a86;
+$toggle-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #19252f, 0 0 0 2px #4187ff;
+$toggle-dark-color-scheme-primary-checked-border-color: #0059b8;
+$toggle-dark-color-scheme-primary-checked-background: #0059b8;
+$toggle-dark-color-scheme-error-checked-border-color: #b9023a;
+$toggle-dark-color-scheme-error-checked-background: #b9023a;
+$toggle-size-height: 16px;
+$toggle-size-width: 28px;
+$toggle-size-border-radius: 9px;
+$toggle-size-label-margin: 8px;
+$toggle-font-default: body;
+$toggle-small-size-height: 14px;
+$toggle-small-size-width: 24px;
+$toggle-small-size-border-radius: 8px;
+$toggle-small-font-default: caption;
+$tooltip-light-color-scheme-background: #333f4a;
+$tooltip-light-color-scheme-text: #d7dee4;
+$tooltip-light-color-scheme-border: transparent;
+$tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
+$tooltip-light-color-scheme-warning-background: #fff4dd;
+$tooltip-light-color-scheme-warning-text: #19252f;
+$tooltip-light-color-scheme-warning-border: #fcdda6;
+$tooltip-dark-color-scheme-background: white;
+$tooltip-dark-color-scheme-text: #19252f;
+$tooltip-dark-color-scheme-border: transparent;
+$tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
+$tooltip-dark-color-scheme-warning-background: #7e5406;
+$tooltip-dark-color-scheme-warning-text: #d7dee4;
+$tooltip-dark-color-scheme-warning-border: #7e5406;
+$tooltip-size-max-width: 300px;
+$tooltip-size-border-width: 1px;
+$tooltip-size-border-radius: 4px;
+$tooltip-size-padding: 8px 16px;
+$tooltip-size-arrow-size: 12px;
+$tooltip-size-trigger-margin: 9px;
+$tooltip-font-default: caption;
+$extended-tooltip-light-color-scheme-background: white;
+$extended-tooltip-light-color-scheme-text: #19252f;
+$extended-tooltip-light-color-scheme-border: #d7dee4;
+$extended-tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
+$extended-tooltip-dark-color-scheme-background: #333f4a;
+$extended-tooltip-dark-color-scheme-text: #d7dee4;
+$extended-tooltip-dark-color-scheme-border: #333f4a;
+$extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
+$extended-tooltip-size-border-radius: 4px;
+$extended-tooltip-size-arrow-size: 12px;
+$extended-tooltip-size-trigger-margin: 9px;
+$extended-tooltip-size-padding: 8px 16px;
+$extended-tooltip-size-max-height: 480px;
+$extended-tooltip-font-default: caption;
+$extended-tooltip-header-light-color-scheme-border: #d7dee4;
+$extended-tooltip-header-light-color-scheme-text: #19252f;
+$extended-tooltip-header-light-color-scheme-background: white;
+$extended-tooltip-header-dark-color-scheme-border: #434f5a;
+$extended-tooltip-header-dark-color-scheme-text: #d7dee4;
+$extended-tooltip-header-dark-color-scheme-background: #333f4a;
+$extended-tooltip-header-size-height: 40px;
+$extended-tooltip-header-size-padding: 8px 16px;
+$extended-tooltip-header-font-default: subheading;
+$tree-size-node-height: 32px;
+$tree-size-padding-left: 12px;
+$tree-size-toggle-padding: 4px;
+$tree-size-icon-padding: 8px;
+$tree-size-padding-right: 16px;
+$tree-font-node: body;
+$light-color-scheme-primary-palette: (
+40: #eff6ff,
+60: #e7f1ff,
+100: #c8dfff,
+200: #a2c7fe,
+300: #5697ff,
+400: #4187ff,
+500: #0374eb,
+560: #0059b8,
+600: #014b9d,
+700: #023c7f,
+800: #193060,
+900: #00224f,
+1000: #001a40,
+A100: rgba(3, 116, 235, 0.15),
+A200: rgba(3, 116, 235, 0.3),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$light-color-scheme-second-palette: (
+40: #f2f5f9,
+60: #ebeef2,
+100: #d7dee4,
+200: #bdc7d1,
+300: #8c99a5,
+400: #7f8c98,
+500: #6d7a86,
+560: #515e69,
+600: #434f5a,
+700: #333f4a,
+800: #27333e,
+900: #19252f,
+1000: #151e25,
+A40: rgba(25, 37, 47, 0.04),
+A60: rgba(25, 37, 47, 0.06),
+A100: rgba(25, 37, 47, 0.1),
+A200: rgba(25, 37, 47, 0.2),
+A300: rgba(25, 37, 47, 0.3),
+A500: rgba(25, 37, 47, 0.5),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+
+)
+);
+
+$light-color-scheme-error-palette: (
+40: #fff3f3,
+60: #ffeaea,
+100: #fbd6d6,
+200: #fcb2b4,
+300: #ee6f79,
+400: #ea5868,
+500: #db3c55,
+560: #b9023a,
+600: #9e0130,
+700: #800025,
+800: #621420,
+900: #500013,
+1000: #41000b,
+A100: rgba(219, 60, 85, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$light-color-scheme-info-palette: (
+40: #ebf8fd,
+60: #d9f3fd,
+100: #afe6f9,
+200: #6ed3f2,
+300: #18a5c5,
+400: #2099b7,
+500: #218ca8,
+560: #0c6579,
+600: #0c5567,
+700: #084453,
+800: #143641,
+900: #022731,
+1000: #001f28,
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$light-color-scheme-success-palette: (
+40: #ecf9ef,
+60: #d2f7db,
+100: #b6ebc3,
+200: #8ed5a1,
+300: #4ba96c,
+400: #319d5c,
+500: #028b49,
+560: #016b37,
+600: #015a2d,
+700: #004823,
+800: #103920,
+900: #002a12,
+1000: #00210c,
+A100: rgba(2, 139, 73, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$light-color-scheme-warning-palette: (
+40: #fff4dd,
+60: #ffecce,
+100: #fcdda6,
+200: #f5c23c,
+300: #e19f12,
+400: #c78816,
+500: #a26e0c,
+560: #7e5406,
+600: #6b4804,
+700: #543803,
+800: #3e3015,
+900: #312001,
+1000: #1f1500,
+A100: rgba(255, 159, 18, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$dark-color-scheme-primary-palette: (
+40: #eff6ff,
+60: #e7f1ff,
+100: #c8dfff,
+200: #a2c7fe,
+300: #5697ff,
+400: #4187ff,
+500: #0374eb,
+560: #0059b8,
+600: #014b9d,
+700: #023c7f,
+800: #193060,
+900: #00224f,
+1000: #001a40,
+A100: rgba(3, 116, 235, 0.15),
+A200: rgba(3, 116, 235, 0.3),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$dark-color-scheme-second-palette: (
+40: #f2f5f9,
+60: #ebeef2,
+100: #d7dee4,
+200: #bdc7d1,
+300: #8c99a5,
+400: #7f8c98,
+500: #6d7a86,
+560: #515e69,
+600: #434f5a,
+700: #333f4a,
+800: #27333e,
+900: #19252f,
+1000: #151e25,
+A40: rgba(25, 37, 47, 0.04),
+A60: rgba(25, 37, 47, 0.06),
+A100: rgba(25, 37, 47, 0.1),
+A200: rgba(25, 37, 47, 0.2),
+A300: rgba(25, 37, 47, 0.3),
+A500: rgba(25, 37, 47, 0.5),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+
+)
+);
+
+$dark-color-scheme-error-palette: (
+40: #fff3f3,
+60: #ffeaea,
+100: #fbd6d6,
+200: #fcb2b4,
+300: #ee6f79,
+400: #ea5868,
+500: #db3c55,
+560: #b9023a,
+600: #9e0130,
+700: #800025,
+800: #621420,
+900: #500013,
+1000: #41000b,
+A100: rgba(219, 60, 85, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$dark-color-scheme-info-palette: (
+40: #ebf8fd,
+60: #d9f3fd,
+100: #afe6f9,
+200: #6ed3f2,
+300: #18a5c5,
+400: #2099b7,
+500: #218ca8,
+560: #0c6579,
+600: #0c5567,
+700: #084453,
+800: #143641,
+900: #022731,
+1000: #001f28,
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$dark-color-scheme-success-palette: (
+40: #ecf9ef,
+60: #d2f7db,
+100: #b6ebc3,
+200: #8ed5a1,
+300: #4ba96c,
+400: #319d5c,
+500: #028b49,
+560: #016b37,
+600: #015a2d,
+700: #004823,
+800: #103920,
+900: #002a12,
+1000: #00210c,
+A100: rgba(2, 139, 73, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$dark-color-scheme-warning-palette: (
+40: #fff4dd,
+60: #ffecce,
+100: #fcdda6,
+200: #f5c23c,
+300: #e19f12,
+400: #c78816,
+500: #a26e0c,
+560: #7e5406,
+600: #6b4804,
+700: #543803,
+800: #3e3015,
+900: #312001,
+1000: #1f1500,
+A100: rgba(255, 159, 18, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$color-blue-palette: (
+40: #eff6ff,
+60: #e7f1ff,
+100: #c8dfff,
+200: #a2c7fe,
+300: #5697ff,
+400: #4187ff,
+500: #0374eb,
+560: #0059b8,
+600: #014b9d,
+700: #023c7f,
+800: #193060,
+900: #00224f,
+1000: #001a40,
+A100: rgba(3, 116, 235, 0.15),
+A200: rgba(3, 116, 235, 0.3),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$color-green-palette: (
+40: #ecf9ef,
+60: #d2f7db,
+100: #b6ebc3,
+200: #8ed5a1,
+300: #4ba96c,
+400: #319d5c,
+500: #028b49,
+560: #016b37,
+600: #015a2d,
+700: #004823,
+800: #103920,
+900: #002a12,
+1000: #00210c,
+A100: rgba(2, 139, 73, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$color-red-palette: (
+40: #fff3f3,
+60: #ffeaea,
+100: #fbd6d6,
+200: #fcb2b4,
+300: #ee6f79,
+400: #ea5868,
+500: #db3c55,
+560: #b9023a,
+600: #9e0130,
+700: #800025,
+800: #621420,
+900: #500013,
+1000: #41000b,
+A100: rgba(219, 60, 85, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$color-grey-palette: (
+40: #f2f5f9,
+60: #ebeef2,
+100: #d7dee4,
+200: #bdc7d1,
+300: #8c99a5,
+400: #7f8c98,
+500: #6d7a86,
+560: #515e69,
+600: #434f5a,
+700: #333f4a,
+800: #27333e,
+900: #19252f,
+1000: #151e25,
+A40: rgba(25, 37, 47, 0.04),
+A60: rgba(25, 37, 47, 0.06),
+A100: rgba(25, 37, 47, 0.1),
+A200: rgba(25, 37, 47, 0.2),
+A300: rgba(25, 37, 47, 0.3),
+A500: rgba(25, 37, 47, 0.5),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+
+)
+);
+
+$color-yellow-palette: (
+40: #fff4dd,
+60: #ffecce,
+100: #fcdda6,
+200: #f5c23c,
+300: #e19f12,
+400: #c78816,
+500: #a26e0c,
+560: #7e5406,
+600: #6b4804,
+700: #543803,
+800: #3e3015,
+900: #312001,
+1000: #1f1500,
+A100: rgba(255, 159, 18, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
+$color-teal-palette: (
+40: #ebf8fd,
+60: #d9f3fd,
+100: #afe6f9,
+200: #6ed3f2,
+300: #18a5c5,
+400: #2099b7,
+500: #218ca8,
+560: #0c6579,
+600: #0c5567,
+700: #084453,
+800: #143641,
+900: #022731,
+1000: #001f28,
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$color-purple-palette: (
+40: #fff3fb,
+60: #ffe9f8,
+100: #f2d4e8,
+200: #e4bbd7,
+300: #c692b5,
+400: #bb78a7,
+500: #a65d92,
+560: #864775,
+600: #753865,
+700: #612853,
+800: #48273f,
+900: #36172e,
+1000: #23001b,
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$typography-display-1-font-size: 56px;
+$typography-display-1-line-height: 76px;
+$typography-display-1-letter-spacing: normal;
+$typography-display-1-font-weight: normal;
+$typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-1-text-transform: null;
+$typography-display-1-font-feature-settings: initial;
+$typography-display-2-font-size: 45px;
+$typography-display-2-line-height: 56px;
+$typography-display-2-letter-spacing: normal;
+$typography-display-2-font-weight: normal;
+$typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-2-text-transform: null;
+$typography-display-2-font-feature-settings: initial;
+$typography-display-3-font-size: 34px;
+$typography-display-3-line-height: 44px;
+$typography-display-3-letter-spacing: normal;
+$typography-display-3-font-weight: normal;
+$typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-3-text-transform: null;
+$typography-display-3-font-feature-settings: initial;
+$typography-headline-font-size: 24px;
+$typography-headline-line-height: 32px;
+$typography-headline-letter-spacing: normal;
+$typography-headline-font-weight: normal;
+$typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-headline-text-transform: null;
+$typography-headline-font-feature-settings: initial;
+$typography-title-font-size: 20px;
+$typography-title-line-height: 28px;
+$typography-title-letter-spacing: normal;
+$typography-title-font-weight: 600;
+$typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-title-text-transform: null;
+$typography-title-font-feature-settings: initial;
+$typography-subheading-font-size: 15px;
+$typography-subheading-line-height: 20px;
+$typography-subheading-letter-spacing: -0.009em;
+$typography-subheading-font-weight: 600;
+$typography-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-subheading-text-transform: null;
+$typography-subheading-font-feature-settings: "ss01" on, "ss04" on;
+$typography-body-font-size: 15px;
+$typography-body-line-height: 20px;
+$typography-body-letter-spacing: -0.009em;
+$typography-body-font-weight: normal;
+$typography-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-text-transform: null;
+$typography-body-font-feature-settings: "ss01" on, "ss04" on;
+$typography-body-tabular-font-size: 15px;
+$typography-body-tabular-line-height: 20px;
+$typography-body-tabular-letter-spacing: -0.009em;
+$typography-body-tabular-font-weight: normal;
+$typography-body-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-tabular-text-transform: null;
+$typography-body-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
+$typography-body-strong-font-size: 15px;
+$typography-body-strong-line-height: 20px;
+$typography-body-strong-letter-spacing: -0.009em;
+$typography-body-strong-font-weight: 500;
+$typography-body-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-strong-text-transform: null;
+$typography-body-strong-font-feature-settings: "ss01" on, "ss04" on;
+$typography-body-caps-font-size: 15px;
+$typography-body-caps-line-height: 20px;
+$typography-body-caps-letter-spacing: 1.7px;
+$typography-body-caps-font-weight: normal;
+$typography-body-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-caps-text-transform: uppercase;
+$typography-body-caps-font-feature-settings: "ss01" on, "ss04" on;
+$typography-body-mono-font-size: 15px;
+$typography-body-mono-line-height: 20px;
+$typography-body-mono-letter-spacing: normal;
+$typography-body-mono-font-weight: normal;
+$typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-body-mono-text-transform: null;
+$typography-body-mono-font-feature-settings: initial;
+$typography-caption-font-size: 13px;
+$typography-caption-line-height: 16px;
+$typography-caption-letter-spacing: -0.0025em;
+$typography-caption-font-weight: normal;
+$typography-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-text-transform: null;
+$typography-caption-font-feature-settings: "ss01" on, "ss04" on;
+$typography-caption-tabular-font-size: 13px;
+$typography-caption-tabular-line-height: 16px;
+$typography-caption-tabular-letter-spacing: -0.0025em;
+$typography-caption-tabular-font-weight: normal;
+$typography-caption-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-tabular-text-transform: null;
+$typography-caption-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
+$typography-caption-strong-font-size: 13px;
+$typography-caption-strong-line-height: 16px;
+$typography-caption-strong-letter-spacing: -0.0025em;
+$typography-caption-strong-font-weight: 500;
+$typography-caption-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-strong-text-transform: null;
+$typography-caption-strong-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
+$typography-caption-caps-font-size: 13px;
+$typography-caption-caps-line-height: 16px;
+$typography-caption-caps-letter-spacing: 1.5px;
+$typography-caption-caps-font-weight: normal;
+$typography-caption-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-caps-text-transform: uppercase;
+$typography-caption-caps-font-feature-settings: "ss01" on, "ss04" on;
+$typography-caption-mono-font-size: 13px;
+$typography-caption-mono-line-height: 16px;
+$typography-caption-mono-letter-spacing: normal;
+$typography-caption-mono-font-weight: normal;
+$typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-caption-mono-text-transform: null;
+$typography-caption-mono-font-feature-settings: initial;
+$typography-small-text-font-size: 13px;
+$typography-small-text-line-height: 16px;
+$typography-small-text-letter-spacing: -0.0025em;
+$typography-small-text-font-weight: normal;
+$typography-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-small-text-text-transform: null;
+$typography-small-text-font-feature-settings: "ss01" on, "ss04" on;
+$typography-extra-small-text-font-size: 11px;
+$typography-extra-small-text-line-height: 16px;
+$typography-extra-small-text-letter-spacing: 0.005em;
+$typography-extra-small-text-font-weight: normal;
+$typography-extra-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-extra-small-text-text-transform: null;
+$typography-extra-small-text-font-feature-settings: "ss01" on, "ss04" on;
+$typography-extra-small-text-caps-font-size: 11px;
+$typography-extra-small-text-caps-line-height: 16px;
+$typography-extra-small-text-caps-letter-spacing: 1px;
+$typography-extra-small-text-caps-font-weight: normal;
+$typography-extra-small-text-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-extra-small-text-caps-text-transform: uppercase;
+$typography-extra-small-text-caps-font-feature-settings: "ss01" on, "ss04" on;
+$typography-extra-small-text-mono-font-size: 11px;
+$typography-extra-small-text-mono-line-height: 16px;
+$typography-extra-small-text-mono-letter-spacing: 0px;
+$typography-extra-small-text-mono-font-weight: normal;
+$typography-extra-small-text-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-extra-small-text-mono-text-transform: null;
+$typography-extra-small-text-mono-font-feature-settings: initial;
+
+$mosaic: (
+  'typography': (
+    'display-1': (
+      'font-size': $typography-display-1-font-size,
+      'line-height': $typography-display-1-line-height,
+      'letter-spacing': $typography-display-1-letter-spacing,
+      'font-weight': $typography-display-1-font-weight,
+      'font-family': $typography-display-1-font-family,
+      'text-transform': $typography-display-1-text-transform,
+      'font-feature-settings': $typography-display-1-font-feature-settings
+    ),
+    'display-2': (
+      'font-size': $typography-display-2-font-size,
+      'line-height': $typography-display-2-line-height,
+      'letter-spacing': $typography-display-2-letter-spacing,
+      'font-weight': $typography-display-2-font-weight,
+      'font-family': $typography-display-2-font-family,
+      'text-transform': $typography-display-2-text-transform,
+      'font-feature-settings': $typography-display-2-font-feature-settings
+    ),
+    'display-3': (
+      'font-size': $typography-display-3-font-size,
+      'line-height': $typography-display-3-line-height,
+      'letter-spacing': $typography-display-3-letter-spacing,
+      'font-weight': $typography-display-3-font-weight,
+      'font-family': $typography-display-3-font-family,
+      'text-transform': $typography-display-3-text-transform,
+      'font-feature-settings': $typography-display-3-font-feature-settings
+    ),
+    'headline': (
+      'font-size': $typography-headline-font-size,
+      'line-height': $typography-headline-line-height,
+      'letter-spacing': $typography-headline-letter-spacing,
+      'font-weight': $typography-headline-font-weight,
+      'font-family': $typography-headline-font-family,
+      'text-transform': $typography-headline-text-transform,
+      'font-feature-settings': $typography-headline-font-feature-settings
+    ),
+    'title': (
+      'font-size': $typography-title-font-size,
+      'line-height': $typography-title-line-height,
+      'letter-spacing': $typography-title-letter-spacing,
+      'font-weight': $typography-title-font-weight,
+      'font-family': $typography-title-font-family,
+      'text-transform': $typography-title-text-transform,
+      'font-feature-settings': $typography-title-font-feature-settings
+    ),
+    'subheading': (
+      'font-size': $typography-subheading-font-size,
+      'line-height': $typography-subheading-line-height,
+      'letter-spacing': $typography-subheading-letter-spacing,
+      'font-weight': $typography-subheading-font-weight,
+      'font-family': $typography-subheading-font-family,
+      'text-transform': $typography-subheading-text-transform,
+      'font-feature-settings': $typography-subheading-font-feature-settings
+    ),
+    'body': (
+      'font-size': $typography-body-font-size,
+      'line-height': $typography-body-line-height,
+      'letter-spacing': $typography-body-letter-spacing,
+      'font-weight': $typography-body-font-weight,
+      'font-family': $typography-body-font-family,
+      'text-transform': $typography-body-text-transform,
+      'font-feature-settings': $typography-body-font-feature-settings
+    ),
+    'body-tabular': (
+      'font-size': $typography-body-tabular-font-size,
+      'line-height': $typography-body-tabular-line-height,
+      'letter-spacing': $typography-body-tabular-letter-spacing,
+      'font-weight': $typography-body-tabular-font-weight,
+      'font-family': $typography-body-tabular-font-family,
+      'text-transform': $typography-body-tabular-text-transform,
+      'font-feature-settings': $typography-body-tabular-font-feature-settings
+    ),
+    'body-strong': (
+      'font-size': $typography-body-strong-font-size,
+      'line-height': $typography-body-strong-line-height,
+      'letter-spacing': $typography-body-strong-letter-spacing,
+      'font-weight': $typography-body-strong-font-weight,
+      'font-family': $typography-body-strong-font-family,
+      'text-transform': $typography-body-strong-text-transform,
+      'font-feature-settings': $typography-body-strong-font-feature-settings
+    ),
+    'body-caps': (
+      'font-size': $typography-body-caps-font-size,
+      'line-height': $typography-body-caps-line-height,
+      'letter-spacing': $typography-body-caps-letter-spacing,
+      'font-weight': $typography-body-caps-font-weight,
+      'font-family': $typography-body-caps-font-family,
+      'text-transform': $typography-body-caps-text-transform,
+      'font-feature-settings': $typography-body-caps-font-feature-settings
+    ),
+    'body-mono': (
+      'font-size': $typography-body-mono-font-size,
+      'line-height': $typography-body-mono-line-height,
+      'letter-spacing': $typography-body-mono-letter-spacing,
+      'font-weight': $typography-body-mono-font-weight,
+      'font-family': $typography-body-mono-font-family,
+      'text-transform': $typography-body-mono-text-transform,
+      'font-feature-settings': $typography-body-mono-font-feature-settings
+    ),
+    'caption': (
+      'font-size': $typography-caption-font-size,
+      'line-height': $typography-caption-line-height,
+      'letter-spacing': $typography-caption-letter-spacing,
+      'font-weight': $typography-caption-font-weight,
+      'font-family': $typography-caption-font-family,
+      'text-transform': $typography-caption-text-transform,
+      'font-feature-settings': $typography-caption-font-feature-settings
+    ),
+    'caption-tabular': (
+      'font-size': $typography-caption-tabular-font-size,
+      'line-height': $typography-caption-tabular-line-height,
+      'letter-spacing': $typography-caption-tabular-letter-spacing,
+      'font-weight': $typography-caption-tabular-font-weight,
+      'font-family': $typography-caption-tabular-font-family,
+      'text-transform': $typography-caption-tabular-text-transform,
+      'font-feature-settings': $typography-caption-tabular-font-feature-settings
+    ),
+    'caption-strong': (
+      'font-size': $typography-caption-strong-font-size,
+      'line-height': $typography-caption-strong-line-height,
+      'letter-spacing': $typography-caption-strong-letter-spacing,
+      'font-weight': $typography-caption-strong-font-weight,
+      'font-family': $typography-caption-strong-font-family,
+      'text-transform': $typography-caption-strong-text-transform,
+      'font-feature-settings': $typography-caption-strong-font-feature-settings
+    ),
+    'caption-caps': (
+      'font-size': $typography-caption-caps-font-size,
+      'line-height': $typography-caption-caps-line-height,
+      'letter-spacing': $typography-caption-caps-letter-spacing,
+      'font-weight': $typography-caption-caps-font-weight,
+      'font-family': $typography-caption-caps-font-family,
+      'text-transform': $typography-caption-caps-text-transform,
+      'font-feature-settings': $typography-caption-caps-font-feature-settings
+    ),
+    'caption-mono': (
+      'font-size': $typography-caption-mono-font-size,
+      'line-height': $typography-caption-mono-line-height,
+      'letter-spacing': $typography-caption-mono-letter-spacing,
+      'font-weight': $typography-caption-mono-font-weight,
+      'font-family': $typography-caption-mono-font-family,
+      'text-transform': $typography-caption-mono-text-transform,
+      'font-feature-settings': $typography-caption-mono-font-feature-settings
+    ),
+    'small-text': (
+      'font-size': $typography-small-text-font-size,
+      'line-height': $typography-small-text-line-height,
+      'letter-spacing': $typography-small-text-letter-spacing,
+      'font-weight': $typography-small-text-font-weight,
+      'font-family': $typography-small-text-font-family,
+      'text-transform': $typography-small-text-text-transform,
+      'font-feature-settings': $typography-small-text-font-feature-settings
+    ),
+    'extra-small-text': (
+      'font-size': $typography-extra-small-text-font-size,
+      'line-height': $typography-extra-small-text-line-height,
+      'letter-spacing': $typography-extra-small-text-letter-spacing,
+      'font-weight': $typography-extra-small-text-font-weight,
+      'font-family': $typography-extra-small-text-font-family,
+      'text-transform': $typography-extra-small-text-text-transform,
+      'font-feature-settings': $typography-extra-small-text-font-feature-settings
+    ),
+    'extra-small-text-caps': (
+      'font-size': $typography-extra-small-text-caps-font-size,
+      'line-height': $typography-extra-small-text-caps-line-height,
+      'letter-spacing': $typography-extra-small-text-caps-letter-spacing,
+      'font-weight': $typography-extra-small-text-caps-font-weight,
+      'font-family': $typography-extra-small-text-caps-font-family,
+      'text-transform': $typography-extra-small-text-caps-text-transform,
+      'font-feature-settings': $typography-extra-small-text-caps-font-feature-settings
+    ),
+    'extra-small-text-mono': (
+      'font-size': $typography-extra-small-text-mono-font-size,
+      'line-height': $typography-extra-small-text-mono-line-height,
+      'letter-spacing': $typography-extra-small-text-mono-letter-spacing,
+      'font-weight': $typography-extra-small-text-mono-font-weight,
+      'font-family': $typography-extra-small-text-mono-font-family,
+      'text-transform': $typography-extra-small-text-mono-text-transform,
+      'font-feature-settings': $typography-extra-small-text-mono-font-feature-settings
+    )
+  )
+);
+
+$md-typography-md-h1-font-size: 45px;
+$md-typography-md-h1-line-height: 48px;
+$md-typography-md-h1-letter-spacing: normal;
+$md-typography-md-h1-font-weight: normal;
+$md-typography-md-h1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h1-text-transform: null;
+$md-typography-md-h1-font-feature-settings: initial;
+$md-typography-md-h2-font-size: 34px;
+$md-typography-md-h2-line-height: 38px;
+$md-typography-md-h2-letter-spacing: normal;
+$md-typography-md-h2-font-weight: normal;
+$md-typography-md-h2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h2-text-transform: null;
+$md-typography-md-h2-font-feature-settings: initial;
+$md-typography-md-h3-font-size: 24px;
+$md-typography-md-h3-line-height: 28px;
+$md-typography-md-h3-letter-spacing: normal;
+$md-typography-md-h3-font-weight: normal;
+$md-typography-md-h3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h3-text-transform: null;
+$md-typography-md-h3-font-feature-settings: initial;
+$md-typography-md-h4-font-size: 20px;
+$md-typography-md-h4-line-height: 24px;
+$md-typography-md-h4-letter-spacing: normal;
+$md-typography-md-h4-font-weight: 600;
+$md-typography-md-h4-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h4-text-transform: null;
+$md-typography-md-h4-font-feature-settings: initial;
+$md-typography-md-h5-font-size: 15px;
+$md-typography-md-h5-line-height: 24px;
+$md-typography-md-h5-letter-spacing: -0.009em;
+$md-typography-md-h5-font-weight: 600;
+$md-typography-md-h5-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h5-text-transform: null;
+$md-typography-md-h5-font-feature-settings: "ss01" on, "ss04" on;
+$md-typography-md-h6-font-size: 15px;
+$md-typography-md-h6-line-height: 24px;
+$md-typography-md-h6-letter-spacing: -0.009em;
+$md-typography-md-h6-font-weight: 600;
+$md-typography-md-h6-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h6-text-transform: null;
+$md-typography-md-h6-font-feature-settings: "ss01" on, "ss04" on;
+$md-typography-md-body-font-size: 15px;
+$md-typography-md-body-line-height: 24px;
+$md-typography-md-body-letter-spacing: -0.009em;
+$md-typography-md-body-font-weight: normal;
+$md-typography-md-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-body-text-transform: null;
+$md-typography-md-body-font-feature-settings: "ss01" on, "ss04" on;
+$md-typography-md-body-mono-font-size: 14px;
+$md-typography-md-body-mono-line-height: 20px;
+$md-typography-md-body-mono-letter-spacing: normal;
+$md-typography-md-body-mono-font-weight: normal;
+$md-typography-md-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$md-typography-md-body-mono-text-transform: null;
+$md-typography-md-body-mono-font-feature-settings: initial;
+$md-typography-md-caption-font-size: 13px;
+$md-typography-md-caption-line-height: 16px;
+$md-typography-md-caption-letter-spacing: -0.0025em;
+$md-typography-md-caption-font-weight: normal;
+$md-typography-md-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-caption-text-transform: null;
+$md-typography-md-caption-font-feature-settings: "ss01" on, "ss04" on;
+$md-typography-md-table-cell-font-size: 15px;
+$md-typography-md-table-cell-line-height: 20px;
+$md-typography-md-table-cell-letter-spacing: -0.009em;
+$md-typography-md-table-cell-font-weight: normal;
+$md-typography-md-table-cell-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-table-cell-text-transform: null;
+$md-typography-md-table-cell-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
+$md-typography-md-table-header-font-size: 13px;
+$md-typography-md-table-header-line-height: 16px;
+$md-typography-md-table-header-letter-spacing: -0.0025em;
+$md-typography-md-table-header-font-weight: normal;
+$md-typography-md-table-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-table-header-text-transform: null;
+$md-typography-md-table-header-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
+
+$md-typography: (
+  'md-typography': (
+    'md-h1': (
+      'font-size': $md-typography-md-h1-font-size,
+      'line-height': $md-typography-md-h1-line-height,
+      'letter-spacing': $md-typography-md-h1-letter-spacing,
+      'font-weight': $md-typography-md-h1-font-weight,
+      'font-family': $md-typography-md-h1-font-family,
+      'text-transform': $md-typography-md-h1-text-transform,
+      'font-feature-settings': $md-typography-md-h1-font-feature-settings
+    ),
+    'md-h2': (
+      'font-size': $md-typography-md-h2-font-size,
+      'line-height': $md-typography-md-h2-line-height,
+      'letter-spacing': $md-typography-md-h2-letter-spacing,
+      'font-weight': $md-typography-md-h2-font-weight,
+      'font-family': $md-typography-md-h2-font-family,
+      'text-transform': $md-typography-md-h2-text-transform,
+      'font-feature-settings': $md-typography-md-h2-font-feature-settings
+    ),
+    'md-h3': (
+      'font-size': $md-typography-md-h3-font-size,
+      'line-height': $md-typography-md-h3-line-height,
+      'letter-spacing': $md-typography-md-h3-letter-spacing,
+      'font-weight': $md-typography-md-h3-font-weight,
+      'font-family': $md-typography-md-h3-font-family,
+      'text-transform': $md-typography-md-h3-text-transform,
+      'font-feature-settings': $md-typography-md-h3-font-feature-settings
+    ),
+    'md-h4': (
+      'font-size': $md-typography-md-h4-font-size,
+      'line-height': $md-typography-md-h4-line-height,
+      'letter-spacing': $md-typography-md-h4-letter-spacing,
+      'font-weight': $md-typography-md-h4-font-weight,
+      'font-family': $md-typography-md-h4-font-family,
+      'text-transform': $md-typography-md-h4-text-transform,
+      'font-feature-settings': $md-typography-md-h4-font-feature-settings
+    ),
+    'md-h5': (
+      'font-size': $md-typography-md-h5-font-size,
+      'line-height': $md-typography-md-h5-line-height,
+      'letter-spacing': $md-typography-md-h5-letter-spacing,
+      'font-weight': $md-typography-md-h5-font-weight,
+      'font-family': $md-typography-md-h5-font-family,
+      'text-transform': $md-typography-md-h5-text-transform,
+      'font-feature-settings': $md-typography-md-h5-font-feature-settings
+    ),
+    'md-h6': (
+      'font-size': $md-typography-md-h6-font-size,
+      'line-height': $md-typography-md-h6-line-height,
+      'letter-spacing': $md-typography-md-h6-letter-spacing,
+      'font-weight': $md-typography-md-h6-font-weight,
+      'font-family': $md-typography-md-h6-font-family,
+      'text-transform': $md-typography-md-h6-text-transform,
+      'font-feature-settings': $md-typography-md-h6-font-feature-settings
+    ),
+    'md-body': (
+      'font-size': $md-typography-md-body-font-size,
+      'line-height': $md-typography-md-body-line-height,
+      'letter-spacing': $md-typography-md-body-letter-spacing,
+      'font-weight': $md-typography-md-body-font-weight,
+      'font-family': $md-typography-md-body-font-family,
+      'text-transform': $md-typography-md-body-text-transform,
+      'font-feature-settings': $md-typography-md-body-font-feature-settings
+    ),
+    'md-body-mono': (
+      'font-size': $md-typography-md-body-mono-font-size,
+      'line-height': $md-typography-md-body-mono-line-height,
+      'letter-spacing': $md-typography-md-body-mono-letter-spacing,
+      'font-weight': $md-typography-md-body-mono-font-weight,
+      'font-family': $md-typography-md-body-mono-font-family,
+      'text-transform': $md-typography-md-body-mono-text-transform,
+      'font-feature-settings': $md-typography-md-body-mono-font-feature-settings
+    ),
+    'md-caption': (
+      'font-size': $md-typography-md-caption-font-size,
+      'line-height': $md-typography-md-caption-line-height,
+      'letter-spacing': $md-typography-md-caption-letter-spacing,
+      'font-weight': $md-typography-md-caption-font-weight,
+      'font-family': $md-typography-md-caption-font-family,
+      'text-transform': $md-typography-md-caption-text-transform,
+      'font-feature-settings': $md-typography-md-caption-font-feature-settings
+    ),
+    'md-table-cell': (
+      'font-size': $md-typography-md-table-cell-font-size,
+      'line-height': $md-typography-md-table-cell-line-height,
+      'letter-spacing': $md-typography-md-table-cell-letter-spacing,
+      'font-weight': $md-typography-md-table-cell-font-weight,
+      'font-family': $md-typography-md-table-cell-font-family,
+      'text-transform': $md-typography-md-table-cell-text-transform,
+      'font-feature-settings': $md-typography-md-table-cell-font-feature-settings
+    ),
+    'md-table-header': (
+      'font-size': $md-typography-md-table-header-font-size,
+      'line-height': $md-typography-md-table-header-line-height,
+      'letter-spacing': $md-typography-md-table-header-letter-spacing,
+      'font-weight': $md-typography-md-table-header-font-weight,
+      'font-family': $md-typography-md-table-header-font-family,
+      'text-transform': $md-typography-md-table-header-text-transform,
+      'font-feature-settings': $md-typography-md-table-header-font-feature-settings
+    )
+  )
+);
+
+
+
+
+/*
+*  Responsive attributes
+*
+*  References:
+*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
+*  2) https://css-tricks.com/almanac/properties/f/flex/
+*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+*  5) http://godban.com.ua/projects/flexgrid
+*/
+@-moz-document url-prefix() {
+    .layout-fill {
+        margin: 0;
+        width: 100%;
+        min-height: 100%;
+        height: 100%;
+    }
+}
+
+@mixin flex-order-for-name($sizes: null) {
+    @if $sizes == null {
+        $sizes: '';
+
+        .flex-order {
+            order: 0;
+        }
+    }
+
+    @for $i from -20 through 20 {
+        $order: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $order: '.flex-order-#{$suffix}';
+        }
+
+        #{$order} {
+            order: #{$i};
+        }
+    }
+}
+
+@mixin offset-for-name($sizes:null) {
+    @if $sizes == null {
+        $sizes: '';
+    }
+
+    @for $i from 0 through 19 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i * 5}';
+            } @else {
+                $suffix: '#{$i * 5}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            @if $i != 0 {
+                @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto);
+            } @else {
+                @include rtl-prop(margin-left, margin-right, 0, auto);
+            }
+        }
+    }
+
+    @each $i in 33 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            margin-left: calc(100% / 3);
+        }
+    }
+
+    @each $i in 66 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            @include rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
+        }
+    }
+}
+
+@mixin layout-for-name($name: null) {
+    @if $name == null {
+        $name: '';
+    }
+
+    @if $name != '' {
+        $name: '-#{$name}';
+    }
+
+    .layout#{$name},
+    .layout#{$name}-column,
+    .layout#{$name}-row {
+        box-sizing: border-box;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: flex;
+
+        min-width: 0;
+        min-height: 0;
+    }
+
+    .layout#{$name}-column {
+        flex-direction: column;
+    }
+
+    .layout#{$name}-row {
+        flex-direction: row;
+    }
+}
+
+@mixin flex-properties-for-name($name: null) {
+    $flexName: 'flex';
+
+    @if $name != null {
+        $flexName: 'flex-#{$name}';
+        $name: '-#{$name}';
+    } @else {
+        $name: '';
+    }
+
+    // === flex: 1 1 0%;
+    .#{$flexName}             { flex: 1;         box-sizing: border-box; }
+    .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
+    .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
+    .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
+    .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
+    .#{$flexName}-no-shrink    { flex: 1 0 auto;  box-sizing: border-box; }
+    .#{$flexName}-no-grow      { flex: 0 1 auto;  box-sizing: border-box; }
+
+    // (1-20) * 5 = 0-100%
+    @for $i from 0 through 20 {
+        $value: #{$i * 5 + '%'};
+
+        .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+
+        .layout-row > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+            box-sizing: border-box;
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-width: 0;
+            }
+        }
+
+        .layout-column > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: #{$value};
+            box-sizing: border-box;
+        }
+
+        .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+            box-sizing: border-box;
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-width: 0;
+            }
+        }
+
+        .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: #{$value};
+            box-sizing: border-box;
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-height: 0;
+            }
+        }
+    }
+
+    @if ($name == '') {
+        .flex-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+
+        .flex-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    .layout-row {
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 33.33%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 66.66%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    .layout-column {
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 100%;
+            max-height: 33.33%;
+            box-sizing: border-box;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 100%;
+            max-height: 66.66%;
+            box-sizing: border-box;
+        }
+    }
+
+    .layout#{$name}-row {
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        > .flex {
+            min-width: 0;
+        }
+    }
+
+    .layout#{$name}-column {
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 33.33%;
+            box-sizing: border-box;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 66.66%;
+            box-sizing: border-box;
+        }
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        > .flex {
+            min-height: 0;
+        }
+    }
+
+    .layout-wrap {
+        flex-wrap: wrap;
+    }
+
+    .layout-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .layout-fill {
+        margin: 0;
+
+        width: 100%;
+
+        min-height: 100%;
+        height: 100%;
+    }
+}
+
+@mixin layout-align-for-name($suffix: null) {
+
+    // Alignment attributes for layout containers' children
+    // Arrange on the Main Axis
+    // center, start, end, space-between, space-around
+    // flex-start is the default for justify-content
+    // ------------------------------
+
+    $name: 'layout-align';
+    @if $suffix != null {
+        $name: 'layout-align-#{$suffix}';
+    }
+
+    .#{$name},
+    .#{$name}-start-stretch {
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
+    }
+
+    // Main Axis Center
+    .#{$name}-start,
+    .#{$name}-start-start,
+    .#{$name}-start-center,
+    .#{$name}-start-end,
+    .#{$name}-start-stretch {
+        justify-content: flex-start;
+    }
+
+    // Main Axis Center
+    .#{$name}-center, //stretch
+    .#{$name}-center-start,
+    .#{$name}-center-center,
+    .#{$name}-center-end,
+    .#{$name}-center-stretch {
+        justify-content: center;
+    }
+
+    // Main Axis End
+    .#{$name}-end, //stretch
+    .#{$name}-end-start,
+    .#{$name}-end-center,
+    .#{$name}-end-end,
+    .#{$name}-end-stretch {
+        justify-content: flex-end;
+    }
+
+    // Main Axis Space Around
+    .#{$name}-space-around, //stretch
+    .#{$name}-space-around-center,
+    .#{$name}-space-around-start,
+    .#{$name}-space-around-end,
+    .#{$name}-space-around-stretch {
+        justify-content: space-around;
+    }
+
+    // Main Axis Space Between
+    .#{$name}-space-between, //stretch
+    .#{$name}-space-between-center,
+    .#{$name}-space-between-start,
+    .#{$name}-space-between-end,
+    .#{$name}-space-between-stretch {
+        justify-content: space-between;
+    }
+
+    // Arrange on the Cross Axis
+    // center, start, end
+    // stretch is the default for align-items
+    // ------------------------------
+
+    // Cross Axis Start
+    .#{$name}-start-start,
+    .#{$name}-center-start,
+    .#{$name}-end-start,
+    .#{$name}-space-between-start,
+    .#{$name}-space-around-start {
+        align-items: flex-start;
+        align-content: flex-start;
+    }
+
+    // Cross Axis Center
+    .#{$name}-start-center,
+    .#{$name}-center-center,
+    .#{$name}-end-center,
+    .#{$name}-space-between-center,
+    .#{$name}-space-around-center {
+        align-items: center;
+        align-content: center;
+        max-width: 100%;
+    }
+
+    // Cross Axis Center IE overflow fix
+    .#{$name}-start-center > *,
+    .#{$name}-center-center > *,
+    .#{$name}-end-center > *,
+    .#{$name}-space-between-center > *,
+    .#{$name}-space-around-center > * {
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    // Cross Axis End
+    .#{$name}-start-end,
+    .#{$name}-center-end,
+    .#{$name}-end-end,
+    .#{$name}-space-between-end,
+    .#{$name}-space-around-end {
+        align-items: flex-end;
+        align-content: flex-end;
+    }
+
+    // Cross Axis Start
+    .#{$name}-start-stretch,
+    .#{$name}-center-stretch,
+    .#{$name}-end-stretch,
+    .#{$name}-space-between-stretch,
+    .#{$name}-space-around-stretch {
+        align-items: stretch;
+        align-content: stretch;
+    }
+}
+
+@mixin layout-indents() {
+    $sizes: (
+        '3xs': $size-3xs,
+        'xxs': $size-xxs,
+        'xs': $size-xs,
+        's': $size-s,
+        'm': $size-m,
+        'l': $size-l,
+        'xl': $size-xl,
+        'xxl': $size-xxl,
+        '3xl': $size-3xl,
+        '4xl': $size-4xl,
+        '5xl': $size-5xl,
+        '6xl': $size-6xl,
+        '7xl': $size-7xl
+    );
+
+    $indents: 'padding', 'margin';
+
+    @each $indent in $indents {
+        @each $name, $value in $sizes {
+            .layout-#{$indent}-#{$name} {
+                #{$indent}: $value !important;
+            }
+
+            .layout-#{$indent}-top-#{$name} {
+                #{$indent}-top: $value !important;
+            }
+
+            .layout-#{$indent}-right-#{$name} {
+                #{$indent}-right: $value !important;
+            }
+
+            .layout-#{$indent}-bottom-#{$name} {
+                #{$indent}-bottom: $value !important;
+            }
+
+            .layout-#{$indent}-left-#{$name} {
+                #{$indent}-left: $value !important;
+            }
+        }
+
+        .layout-#{$indent}-no-top {
+            #{$indent}-top: 0 !important;
+        }
+
+        .layout-#{$indent}-no-right {
+            #{$indent}-right: 0 !important;
+        }
+
+        .layout-#{$indent}-no-bottom {
+            #{$indent}-bottom: 0 !important;
+        }
+
+        .layout-#{$indent}-no-left {
+            #{$indent}-left: 0 !important;
+        }
+    }
+}
+
+@mixin layouts-for-breakpoint($name: null) {
+    @include flex-order-for-name($name);
+    @include offset-for-name($name);
+    @include layout-align-for-name($name);
+
+    @include flex-properties-for-name($name);
+    @include layout-for-name($name);
+
+    @include layout-indents();
+}
+
+
+@mixin media-print {
+    @media print {
+        .hide-print:not(.show-print):not(.show) {
+            display: none !important;
+        }
+    }
+}
+
 
 
 @mixin mosaic-visual() {
     // include specific mixins
-    @include body.body-html();
-    @include layout.layouts-for-breakpoint();
-    @include layout-media.media-print();
+    @include body-html();
+    @include layouts-for-breakpoint();
+    @include media-print();
 }