@muraldevkit/ds-foundation 1.0.0

package/dist/foundation.css

@@ -0,0 +1,748 @@
+/* Border Radius Tokens */
+/* Border Width Tokens */
+:root {
+  --mrl-radii-01: 2px;
+  --mrl-radii-02: 4px;
+  --mrl-radii-03: 8px;
+  --mrl-radii-04: 12px;
+  --mrl-radii-05: 16px;
+  --mrl-radii-06: 24px;
+  --mrl-radii-07: 32px;
+  --mrl-radii-08: 40px;
+  --mrl-stroke-01: 2px;
+  --mrl-stroke-02: 2px;
+  --mrl-stroke-03: 2px;
+}
+
+:root {
+  --mrl-gray-10: 250, 250, 250;
+  --mrl-gray-20: 238, 238, 238;
+  --mrl-gray-30: 222, 222, 222;
+  --mrl-gray-40: 187, 187, 187;
+  --mrl-gray-50: 158, 158, 158;
+  --mrl-gray-60: 145, 145, 145;
+  --mrl-gray-70: 115, 115, 115;
+  --mrl-gray-80: 78, 78, 78;
+  --mrl-gray-90: 47, 47, 47;
+  --mrl-gray-100: 31, 31, 31;
+  --mrl-blue-10: 245, 250, 255;
+  --mrl-blue-20: 230, 244, 254;
+  --mrl-blue-30: 205, 230, 254;
+  --mrl-blue-40: 180, 217, 253;
+  --mrl-blue-50: 131, 191, 252;
+  --mrl-blue-60: 81, 143, 251;
+  --mrl-blue-70: 55, 112, 228;
+  --mrl-blue-80: 49, 99, 201;
+  --mrl-blue-90: 42, 86, 176;
+  --mrl-blue-100: 30, 61, 125;
+  --mrl-coral-10: 255, 230, 239;
+  --mrl-coral-20: 254, 204, 223;
+  --mrl-coral-30: 254, 154, 191;
+  --mrl-coral-40: 253, 103, 160;
+  --mrl-coral-50: 253, 53, 129;
+  --mrl-coral-60: 255, 0, 102;
+  --mrl-coral-70: 232, 0, 90;
+  --mrl-coral-80: 214, 0, 87;
+  --mrl-coral-90: 192, 3, 77;
+  --mrl-coral-100: 163, 0, 63;
+  --mrl-red-10: 255, 245, 245;
+  --mrl-red-20: 255, 229, 229;
+  --mrl-red-30: 255, 204, 204;
+  --mrl-red-40: 255, 179, 179;
+  --mrl-red-50: 255, 128, 128;
+  --mrl-red-60: 255, 75, 75;
+  --mrl-red-70: 224, 41, 53;
+  --mrl-red-80: 179, 33, 42;
+  --mrl-red-90: 140, 26, 33;
+  --mrl-red-100: 115, 21, 27;
+  --mrl-tomato-10: 249, 240, 242;
+  --mrl-tomato-20: 242, 212, 219;
+  --mrl-tomato-30: 243, 192, 204;
+  --mrl-tomato-40: 239, 169, 184;
+  --mrl-tomato-50: 233, 134, 156;
+  --mrl-tomato-60: 231, 111, 138;
+  --mrl-tomato-70: 225, 89, 120;
+  --mrl-tomato-80: 220, 64, 100;
+  --mrl-tomato-90: 203, 52, 95;
+  --mrl-tomato-100: 182, 52, 93;
+  --mrl-orange-10: 251, 233, 198;
+  --mrl-orange-20: 249, 224, 175;
+  --mrl-orange-30: 246, 207, 166;
+  --mrl-orange-40: 243, 193, 153;
+  --mrl-orange-50: 243, 180, 148;
+  --mrl-orange-60: 247, 169, 125;
+  --mrl-orange-70: 245, 156, 120;
+  --mrl-orange-80: 245, 135, 101;
+  --mrl-orange-90: 234, 116, 79;
+  --mrl-orange-100: 220, 96, 70;
+  --mrl-lemon-10: 254, 252, 215;
+  --mrl-lemon-20: 255, 250, 183;
+  --mrl-lemon-30: 253, 246, 147;
+  --mrl-lemon-40: 254, 239, 136;
+  --mrl-lemon-50: 251, 233, 122;
+  --mrl-lemon-60: 249, 223, 129;
+  --mrl-lemon-70: 238, 206, 127;
+  --mrl-lemon-80: 229, 191, 118;
+  --mrl-lemon-90: 221, 180, 102;
+  --mrl-lemon-100: 207, 160, 81;
+  --mrl-melon-10: 230, 248, 225;
+  --mrl-melon-20: 213, 245, 204;
+  --mrl-melon-30: 196, 239, 185;
+  --mrl-melon-40: 177, 236, 161;
+  --mrl-melon-50: 158, 223, 151;
+  --mrl-melon-60: 136, 213, 138;
+  --mrl-melon-70: 125, 195, 125;
+  --mrl-melon-80: 108, 179, 109;
+  --mrl-melon-90: 91, 157, 94;
+  --mrl-melon-100: 79, 145, 81;
+  --mrl-blueberry-10: 222, 236, 252;
+  --mrl-blueberry-20: 207, 228, 251;
+  --mrl-blueberry-30: 185, 215, 250;
+  --mrl-blueberry-40: 160, 200, 249;
+  --mrl-blueberry-50: 131, 181, 245;
+  --mrl-blueberry-60: 100, 165, 247;
+  --mrl-blueberry-70: 76, 151, 245;
+  --mrl-blueberry-80: 71, 126, 222;
+  --mrl-blueberry-90: 56, 112, 211;
+  --mrl-blueberry-100: 50, 89, 153;
+  --mrl-grape-10: 231, 230, 250;
+  --mrl-grape-20: 217, 215, 247;
+  --mrl-grape-30: 205, 202, 248;
+  --mrl-grape-40: 187, 187, 242;
+  --mrl-grape-50: 162, 163, 240;
+  --mrl-grape-60: 150, 146, 243;
+  --mrl-grape-70: 134, 126, 231;
+  --mrl-grape-80: 119, 104, 222;
+  --mrl-grape-90: 114, 86, 219;
+  --mrl-grape-100: 83, 71, 157;
+  --mrl-white: 255, 255, 255;
+  --mrl-black: 0, 0, 0;
+  --mrl-status-info: 49, 99, 201;
+  --mrl-status-success: 0, 132, 63;
+  --mrl-status-warning: 255, 170, 1;
+  --mrl-status-error: 179, 33, 42;
+  --mrl-black-opacity-00: rgba(var(--mrl-black), .08);
+  --mrl-black-opacity-01: rgba(var(--mrl-black), .16);
+  --mrl-black-opacity-02: rgba(var(--mrl-black), .24);
+  --mrl-black-opacity-03: rgba(var(--mrl-black), .32);
+  --mrl-black-opacity-06: rgba(var(--mrl-black), .64);
+  --mrl-black-opacity-08: rgba(var(--mrl-black), .80);
+  --mrl-white-opacity-02: rgba(var(--mrl-white), .24);
+  --mrl-white-opacity-03: rgba(var(--mrl-white), .30);
+  --mrl-white-opacity-04: rgba(var(--mrl-white), .40);
+  --mrl-white-opacity-06: rgba(var(--mrl-white), .60);
+  --mrl-white-opacity-08: rgba(var(--mrl-white), .80);
+  --mrl-status-private: var(--mrl-gray-100);
+}
+
+:root {
+  /* Motion - Timing */
+  --mrl-timing-m1: cubic-bezier(0.17, 0.00, 0.00, 1.00);
+  --mrl-timing-m1r: cubic-bezier(1.00, 0.00, 0.83, 1.00);
+  --mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1);
+  --mrl-timing-m3: cubic-bezier(0.33, 0.00, 0.67, 1.00);
+  --mrl-timing-m4: cubic-bezier(0.00, 0.00, 0.00, 1.00);
+  /* Motion - Duration */
+  --mrl-duration-01: 17ms;
+  --mrl-duration-02: 167ms;
+  --mrl-duration-03: 333ms;
+  --mrl-duration-04: 667ms;
+  /* Motion - Distance */
+  --mrl-distance-01: 4px;
+  --mrl-distance-02: 8px;
+}
+
+/**
+ * Please note!
+ * If you make a change to these tokens, please make sure that the
+ * mrl-shadow mixin is changed as well. We need the contextual tokens
+ * to map to the drop-shadow filter!
+*/
+/* Shadow/Elevation Tokens */
+:root {
+  --mrl-shadow-01: 0 0 0 1px rgba(var(--mrl-black), 0.08), 0 3px 4px rgba(var(--mrl-black), 0.08);
+  --mrl-shadow-02: 0 0 0 1px rgba(var(--mrl-black), 0.08), 0 5px 8px rgba(var(--mrl-black), 0.08);
+  --mrl-shadow-03: 0 0 0 1px rgba(var(--mrl-black), 0.08), 0 25px 20px rgba(var(--mrl-black), 0.12);
+  --mrl-shadow-interactive-01: 0 4px 5px rgba(var(--mrl-black), 0.08);
+  --mrl-shadow-interactive-02: 0 20px 12px rgba(var(--mrl-black), 0.20);
+}
+
+/* Spacing Tokens */
+:root {
+  --mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem);
+  --mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem);
+}
+
+/* Font Size Tokens */
+/* Line-height Tokens */
+/* Letter Spacing Tokens */
+/* Font Weight Tokens */
+:root {
+  --mrl-baseline: 16;
+  --mrl-font-family-01: proxima-nova;
+  /* Typography - Font Size */
+  --mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem);
+  --mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem);
+  /* Typography - Line Height */
+  --mrl-line-height-01: 0.875;
+  --mrl-line-height-02: 1;
+  --mrl-line-height-03: 1.125;
+  --mrl-line-height-04: 1.167;
+  --mrl-line-height-05: 1.2;
+  --mrl-line-height-06: 1.33;
+  --mrl-line-height-07: 1.4;
+  --mrl-line-height-08: 1.45;
+  --mrl-line-height-09: 1.5;
+  --mrl-line-height-10: 1.56;
+  --mrl-line-height-11: 1.75;
+  --mrl-line-height-12: 2;
+  /* Typography - Letter Spacing */
+  --mrl-letter-spacing-01: -2% ;
+  --mrl-letter-spacing-02: -1% ;
+  --mrl-letter-spacing-03: 0% ;
+  --mrl-letter-spacing-04: 1% ;
+  --mrl-letter-spacing-05: 2% ;
+  /* Typography - Font Weight */
+  --mrl-font-weight-01: 400 ;
+  --mrl-font-weight-02: 500 ;
+  --mrl-font-weight-03: 600 ;
+  --mrl-font-weight-04: 700 ;
+  --mrl-font-weight-05: 800 ;
+}
+
+:root {
+  /* Color */
+  --mrl-color-focus: rgba(var(--mrl-blue-70), 1);
+  --mrl-color-focus-inverse: rgba(var(--mrl-white), 1);
+  --mrl-color-shadows: rgba(var(--mrl-black), 1);
+  --mrl-color-brand: rgba(var(--mrl-red-70), 1);
+  --mrl-color-brand-hover: rgba(var(--mrl-red-80), 1);
+  --mrl-color-brand-active: rgba(var(--mrl-red-90), 1);
+  --mrl-color-accent: rgba(var(--mrl-blue-70), 1);
+  --mrl-color-skeleton: rgba(var(--mrl-gray-20), 1);
+  --mrl-color-skeleton-inverse: rgba(var(--mrl-white), 1);
+  --mrl-color-background: rgba(var(--mrl-white), 1);
+  --mrl-color-background-secondary: rgba(var(--mrl-gray-80), 1);
+  --mrl-color-background-decorative: rgba(var(--mrl-gray-20), 1);
+  --mrl-color-background-info: rgba(var(--mrl-status-info), 1);
+  --mrl-color-background-success: rgba(var(--mrl-status-success), 1);
+  --mrl-color-background-warning: rgba(var(--mrl-status-warning), 1);
+  --mrl-color-background-error: rgba(var(--mrl-status-error), 1);
+  --mrl-color-background-private: rgba(var(--mrl-status-private), 1);
+  --mrl-color-background-inverse: rgba(var(--mrl-gray-100), 1);
+  --mrl-color-background-inverse-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-background-disabled: rgba(var(--mrl-gray-40), 1);
+  --mrl-color-background-highlight-hover: rgba(var(--mrl-gray-20), 1);
+  --mrl-color-background-highlight-active: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-background-highlight-selected: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-background-highlight-emph-active: rgba(var(--mrl-gray-30), 1);
+  --mrl-color-line: rgba(var(--mrl-gray-70), 1);
+  --mrl-color-line-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-line-active: rgba(var(--mrl-gray-100), 1);
+  --mrl-color-line-selected: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1);
+  --mrl-color-line-divider: rgba(var(--mrl-gray-20), 1);
+  --mrl-color-line-divider-inverse: rgba(var(--mrl-gray-80), 1);
+  --mrl-color-line-emph: rgba(var(--mrl-gray-20), 1);
+  --mrl-color-line-emph-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-line-emph-active: rgba(var(--mrl-black), 1);
+  --mrl-color-line-inverse: rgba(var(--mrl-white), 1);
+  --mrl-color-line-inverse-disabled: rgba(var(--mrl-white), 1);
+  --mrl-color-text: rgba(var(--mrl-gray-80), 1);
+  --mrl-color-text-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-active: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-selected: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1);
+  --mrl-color-text-disabled-inverse: rgba(var(--mrl-white), 1);
+  --mrl-color-text-emph: rgba(var(--mrl-gray-20), 1);
+  --mrl-color-text-emph-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-emph-active: rgba(var(--mrl-black), 1);
+  --mrl-color-text-highlight: rgba(var(--mrl-gray-80), 1);
+  --mrl-color-text-highlight-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-highlight-active: rgba(var(--mrl-white), 1);
+  --mrl-color-text-highlight-selected: rgba(var(--mrl-white), 1);
+  --mrl-color-text-highlight-emph: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-highlight-emph-hover: rgba(var(--mrl-gray-100), 1);
+  --mrl-color-text-highlight-emph-active: rgba(var(--mrl-black), 1);
+  --mrl-color-text-highlight-emph-selected: rgba(var(--mrl-white), 1);
+  --mrl-color-text-inverse: rgba(var(--mrl-white), 1);
+  --mrl-color-text-inverse-secondary: rgba(var(--mrl-gray-10), 1);
+  --mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1);
+  --mrl-color-text-inverse-active: rgba(var(--mrl-white), 1);
+  --mrl-color-text-inverse-selected: rgba(var(--mrl-white), 1);
+  --mrl-color-text-02: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1);
+  --mrl-color-text-label: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-heading: rgba(var(--mrl-gray-100), 1);
+  --mrl-color-text-success: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-warning: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-error: rgba(var(--mrl-status-error), 1);
+  --mrl-color-text-info: rgba(var(--mrl-gray-90), 1);
+  --mrl-color-text-private: rgba(var(--mrl-status-private), 1);
+  --mrl-color-icon-emph-selected: rgba(var(--mrl-gray-100), 1);
+  /* Color tokens that are set to non-global tokens */
+  --mrl-color-background-inverse-active: var(--mrl-color-accent);
+  --mrl-color-background-inverse-selected: var(--mrl-color-accent);
+  --mrl-color-background-highlight-emph-selected: var(--mrl-color-accent);
+  --mrl-color-line-emph-selected: var(--mrl-color-accent);
+  --mrl-color-text-emph-selected: var(--mrl-color-accent);
+  --mrl-color-background-page: rgb(245, 245, 245);
+  /* Colors with opacity */
+  --mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);
+  --mrl-color-background-inverse-hover-opacity: rgba(var(--mrl-black), 0.2);
+}
+
+:root {
+  /* Spacing */
+  --mrl-space-stack-components: var(--mrl-spacing-06);
+  --mrl-space-stack-controls: var(--mrl-spacing-05);
+  --mrl-space-stack-controls-small: var(--mrl-spacing-04);
+  --mrl-space-stack-section: var(--mrl-spacing-07);
+  --mrl-space-stack-section-divider: var(--mrl-spacing-04);
+  --mrl-space-stack-section-divider-small: var(--mrl-spacing-03);
+  --mrl-space-stack-section-divider-large: var(--mrl-spacing-06);
+  --mrl-space-stack-section-divider-label: var(--mrl-spacing-05);
+  --mrl-space-stack-siblings: var(--mrl-spacing-04);
+  --mrl-space-stack-related: var(--mrl-spacing-03);
+  --mrl-space-stack-related-small: var(--mrl-spacing-02);
+  --mrl-space-inset: var(--mrl-spacing-03);
+  --mrl-space-inset-container: var(--mrl-spacing-08);
+  --mrl-space-inset-container-large: var(--mrl-spacing-05);
+  --mrl-space-inset-large: var(--mrl-spacing-05);
+  --mrl-space-inset-control: var(--mrl-spacing-06);
+  --mrl-space-inset-control-large: var(--mrl-spacing-05);
+  --mrl-space-inline-related: var(--mrl-spacing-03);
+  --mrl-space-inline-sibling: var(--mrl-spacing-04);
+  --mrl-space-inline-sibling-small: var(--mrl-spacing-02);
+  --mrl-space-gutter: var(--mrl-spacing-04);
+  --mrl-space-gutter-label: var(--mrl-spacing-05);
+  --mrl-space-offset-focus: var(--mrl-spacing-01);
+  --mrl-space-stack-subheading: var(--mrl-spacing-05);
+  --mrl-space-stack-title: var(--mrl-spacing-07);
+  --mrl-space-stack-title-related: var(--mrl-spacing-05);
+  --mrl-space-inline-sibling-xsmall: var(--mrl-space-inline-sibling-small);
+  --mrl-space-inset-control-small: calc(
+  	var(--mrl-spacing-03) + var(--mrl-spacing-01)
+  );
+}
+@media only screen and (min-width: 600px) {
+  :root {
+    --mrl-space-inset-container-large: var(--mrl-spacing-08);
+  }
+}
+
+:root {
+  --mrl-line-width-border: var(--mrl-stroke-01);
+  --mrl-line-width-border-selected: var(--mrl-stroke-01);
+  --mrl-line-width-focus: var(--mrl-stroke-01);
+  --mrl-line-width-control: var(--mrl-stroke-01);
+  --mrl-line-width-divider: var(--mrl-stroke-01);
+  --mrl-border-radius-tight: var(--mrl-radii-01);
+  --mrl-border-radius-content: var(--mrl-radii-02);
+  --mrl-border-radius-content-large: var(--mrl-radii-03);
+  --mrl-border-radius-functional: var(--mrl-radii-03);
+  --mrl-border-radius-functional-large: var(--mrl-radii-04);
+  --mrl-border-radius-container: var(--mrl-radii-04);
+  --mrl-border-radius-container-large: var(--mrl-radii-05);
+  --mrl-border-radius-rounded: var(--mrl-radii-07);
+  --mrl-border-radius-rounded-large: var(--mrl-radii-08);
+  --mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line);
+  --mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover);
+  --mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active);
+  --mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected);
+  --mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled);
+  --mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph);
+  --mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover);
+  --mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active);
+  --mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-emph-selected);
+  --mrl-border-emph-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-disabled);
+  --mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
+  --mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
+  --mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
+  --mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-inverse);
+  --mrl-border-inverse-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse-disabled);
+  --mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
+  --mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider);
+}
+
+/* Font Size Tokens */
+/* Line Height Tokens */
+/* Font Weight Tokens */
+/* Letter Spacing Tokens */
+:root {
+  --mrl-type-size-poster: var(--mrl-font-size-10);
+  --mrl-type-size-poster-large: var(--mrl-font-size-11);
+  --mrl-type-size-poster-small: var(--mrl-font-size-09);
+  --mrl-type-size-display: var(--mrl-font-size-08);
+  --mrl-type-size-display-large: var(--mrl-font-size-09);
+  --mrl-type-size-display-small: var(--mrl-font-size-07);
+  --mrl-type-size-headline: var(--mrl-font-size-05);
+  --mrl-type-size-headline-large: var(--mrl-font-size-06);
+  --mrl-type-size-headline-small: var(--mrl-font-size-02);
+  --mrl-type-size-text: var(--mrl-font-size-04);
+  --mrl-type-size-text-large: var(--mrl-font-size-05);
+  --mrl-type-size-text-small: var(--mrl-font-size-03);
+  --mrl-type-size-text-xsmall: var(--mrl-font-size-02);
+  --mrl-type-size-text-xxsmall: var(--mrl-font-size-01);
+  --mrl-type-line-height-poster: var(--mrl-line-height-04);
+  --mrl-type-line-height-poster-large: var(--mrl-line-height-03);
+  --mrl-type-line-height-poster-small: var(--mrl-line-height-05);
+  --mrl-type-line-height-display: var(--mrl-line-height-03);
+  --mrl-type-line-height-display-large: var(--mrl-line-height-05);
+  --mrl-type-line-height-display-small: var(--mrl-line-height-06);
+  --mrl-type-line-height-headline: var(--mrl-line-height-09);
+  --mrl-type-line-height-headline-large: var(--mrl-line-height-07);
+  --mrl-type-line-height-headline-small: var(--mrl-line-height-09);
+  --mrl-type-line-height-text: var(--mrl-line-height-09);
+  --mrl-type-line-height-text-large: var(--mrl-line-height-10);
+  --mrl-type-line-height-text-small: var(--mrl-line-height-08);
+  --mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);
+  --mrl-type-line-height-text-xxsmall: var(--mrl-line-height-08);
+  --mrl-type-line-height-interactive: var(--mrl-line-height-09);
+  --mrl-type-line-height-interactive-large: var(--mrl-line-height-10);
+  --mrl-type-line-height-interactive-small: var(--mrl-line-height-08);
+  --mrl-type-line-height-interactive-xsmall: var(--mrl-line-height-06);
+  --mrl-type-weight-poster: var(--mrl-font-weight-05);
+  --mrl-type-weight-display: var(--mrl-font-weight-05);
+  --mrl-type-weight-headline: var(--mrl-font-weight-05);
+  --mrl-type-weight-title: var(--mrl-font-weight-04);
+  --mrl-type-weight-title-secondary: var(--mrl-font-weight-03);
+  --mrl-type-weight-text: var(--mrl-font-weight-02);
+  --mrl-type-weight-text-secondary: var(--mrl-font-weight-01);
+  --mrl-type-weight-interactive: var(--mrl-font-weight-04);
+  --mrl-type-spacing-poster: var(--mrl-letter-spacing-02);
+  --mrl-type-spacing-poster-large: var(--mrl-letter-spacing-01);
+  --mrl-type-spacing-poster-small: var(--mrl-letter-spacing-02);
+  --mrl-type-spacing-display: var(--mrl-letter-spacing-03);
+  --mrl-type-spacing-display-large: var(--mrl-letter-spacing-02);
+  --mrl-type-spacing-display-small: var(--mrl-letter-spacing-03);
+  --mrl-type-spacing-headline: var(--mrl-letter-spacing-03);
+  --mrl-type-spacing-headline-large: var(--mrl-letter-spacing-03);
+  --mrl-type-spacing-headline-small: var(--mrl-letter-spacing-04);
+  --mrl-type-spacing-text: var(--mrl-letter-spacing-03);
+  --mrl-type-spacing-interactive-xsmall: var(--mrl-letter-spacing-04);
+  --mrl-type-size-toggleable-label: calc(10 / var(--mrl-baseline) * 1rem);
+  --mrl-type-weight-toggleable-label: var(--mrl-font-weight-03);
+}
+
+@media screen and (min-width: 600px) {
+  :root {
+    --mrl-type-size-poster: var(--mrl-font-size-12);
+    --mrl-type-size-poster-large: var(--mrl-font-size-13);
+    --mrl-type-size-poster-small: var(--mrl-font-size-11);
+    --mrl-type-size-display: var(--mrl-font-size-09);
+    --mrl-type-size-display-large: var(--mrl-font-size-10);
+    --mrl-type-size-display-small: var(--mrl-font-size-08);
+    --mrl-type-size-headline: var(--mrl-font-size-06);
+    --mrl-type-size-headline-large: var(--mrl-font-size-07);
+    --mrl-type-size-headline-small: var(--mrl-font-size-04);
+    --mrl-type-line-height-poster: var(--mrl-line-height-02);
+    --mrl-type-line-height-poster-large: var(--mrl-line-height-02);
+    --mrl-type-line-height-poster-small: var(--mrl-line-height-02);
+    --mrl-type-line-height-display: var(--mrl-line-height-05);
+    --mrl-type-line-height-display-large: var(--mrl-line-height-04);
+    --mrl-type-line-height-display-small: var(--mrl-line-height-03);
+    --mrl-type-line-height-headline: var(--mrl-line-height-07);
+    --mrl-type-line-height-headline-large: var(--mrl-line-height-06);
+    --mrl-type-line-height-headline-small: var(--mrl-line-height-03);
+    --mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03);
+  }
+}
+/**
+ * Please note!
+ * If you make a change to these tokens, please make sure that the
+ * mrl-shadow mixin is changed as well. We need the tokens
+ * to map to the drop-shadow filter!
+*/
+/* Contextual Shadow Tokens */
+:root {
+  --mrl-shadows-lifted: var(--mrl-shadow-01);
+  --mrl-shadows-raised: var(--mrl-shadow-02);
+  --mrl-shadows-floating: var(--mrl-shadow-03);
+  --mrl-shadows-hover: var(--mrl-shadow-interactive-01);
+  --mrl-shadows-drag: var(--mrl-shadow-interactive-02);
+}
+
+.mrl-u-focus-wrapper {
+  position: relative;
+}
+
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+tt,
+var,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+b,
+em,
+i,
+strike,
+strong,
+sub,
+sup,
+u {
+  border: 0;
+  font-family: inherit;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html {
+  border: 0;
+  box-sizing: border-box;
+  font: inherit;
+  font-family: var(--mrl-font-family-01), sans-serif;
+  font-size: var(--mrl-font-size, 100%);
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+.mrl-u-space-center-horizontal {
+  display: flex;
+}
+
+.mrl-u-space-center-horizontal-inline {
+  display: inline-flex;
+}
+
+.mrl-u-space-center-vertical {
+  align-items: center;
+  display: flex;
+}
+.mrl-u-space-center-vertical > * {
+  display: inline-flex;
+}
+
+.mrl-u-space-center-vertical-inline {
+  align-items: center;
+  display: inline-flex;
+}
+.mrl-u-space-center-vertical-inline > * {
+  display: inline-flex;
+}
+
+.mrl-u-text-interactive-xsmall {
+  font-family: var(--mrl-font-family-01);
+  font-size: var(--mrl-type-size-text-xsmall);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-interactive-xsmall);
+  line-height: var(--mrl-type-line-height-interactive-xsmall);
+}
+
+.mrl-u-text-interactive-small {
+  font-family: var(--mrl-font-family-01);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-interactive-small);
+}
+
+.mrl-u-text-interactive-medium {
+  font-family: var(--mrl-font-family-01);
+  font-size: var(--mrl-type-size-text);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-interactive);
+}
+
+.mrl-u-text-interactive-large {
+  font-family: var(--mrl-font-family-01);
+  font-size: var(--mrl-type-size-text-large);
+  font-weight: var(--mrl-type-weight-interactive);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-interactive-large);
+}
+
+.mrl-u-text-toggleable-label {
+  font-size: var(--mrl-type-size-toggleable-label);
+  font-weight: var(--mrl-type-weight-toggleable-label);
+}
+
+:root {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
+  --mrl-button-border-radius: var(--mrl-border-radius-functional);
+  --mrl-button-height: var(--mrl-spacing-09);
+}
+
+.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated) {
+  background: var(--mrl-button-background-color-skeleton);
+  border-radius: var(--mrl-button-border-radius);
+  box-shadow: none;
+  color: transparent;
+  display: inline-flex;
+  font-family: var(--mrl-font-family-01);
+  min-height: var(--mrl-button-height);
+  min-width: var(--mrl-button-height);
+  pointer-events: none;
+  visibility: inherit;
+}
+.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated) {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+
+mrl-button[size=small],
+mrl-icon-button[size=small],
+mrl-shadow-button[size=small] {
+  --mrl-button-height: var(--mrl-spacing-08);
+}
+
+mrl-button[size=large],
+mrl-icon-button[size=large],
+mrl-shadow-button[size=large] {
+  --mrl-button-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+mrl-icon-button[size=xsmall][kind=ghost],
+mrl-icon-button[size=xsmall][kind=ghost-inverse] {
+  --mrl-button-height: var(--mrl-spacing-07);
+}
+
+/*# sourceMappingURL=foundation.css.map */