@innovaccer/design-system/css/dist/index.css

React components library project for Innovaccer Design System

/**** Color Primitives ****/
:root {
  /* Blue */
  --color-blue-100: #f0f9ff;
  --color-blue-200: #d6eeff;
  --color-blue-300: #c2e4ff;
  --color-blue-400: #a8d8ff;
  --color-blue-500: #8bcafe;
  --color-blue-600: #6fb7fb;
  --color-blue-700: #4fa3f8;
  --color-blue-800: #2e8ef5;
  --color-blue-900: #0a74f5;
  --color-blue-1000: #0060d6;
  --color-blue-1100: #0051ad;
  --color-blue-1200: #003e85;
  --color-blue-1300: #003066;
  --color-blue-1400: #002147;
  --color-blue-1000-4a: rgba(0, 96, 214, 0.04);
  --color-blue-1000-12a: rgba(0, 96, 214, 0.12);
  --color-blue-1000-16a: rgba(0, 96, 214, 0.16);
  --color-blue-200-48a: rgba(214, 238, 255, 0.48);
  --color-blue-500-48a: rgba(139, 202, 254, 0.48);
  --color-blue-1200-16a: rgba(0, 62, 133, 0.16);

  /* Red */
  --color-red-100: #fff2f0;
  --color-red-200: #ffddd6;
  --color-red-300: #ffccc2;
  --color-red-400: #ffb7a8;
  --color-red-500: #fe9e8b;
  --color-red-600: #fb866f;
  --color-red-700: #f86b4f;
  --color-red-800: #f54f2e;
  --color-red-900: #f5310a;
  --color-red-1000: #d62400;
  --color-red-1100: #ad1d00;
  --color-red-1200: #851600;
  --color-red-1300: #611000;
  --color-red-1400: #470c00;
  --color-red-1000-4a: rgba(214, 36, 0, 0.04);
  --color-red-1000-16a: rgba(214, 36, 0, 0.16);
  --color-red-1200-16a: rgba(133, 22, 0, 0.16);

  /* Green */
  --color-green-100: #deffdb;
  --color-green-200: #c4fcc0;
  --color-green-300: #a0f69d;
  --color-green-400: #88ee87;
  --color-green-500: #6be16d;
  --color-green-600: #4fcf55;
  --color-green-700: #27b933;
  --color-green-800: #07a61a;
  --color-green-900: #008f11;
  --color-green-1000: #007a0e;
  --color-green-1100: #00660c;
  --color-green-1200: #00520a;
  --color-green-1300: #004208;
  --color-green-1400: #002e05;
  --color-green-1000-4a: rgba(0, 122, 14, 0.04);
  --color-green-1000-16a: rgba(0, 122, 14, 0.16);
  --color-green-1200-16a: rgba(0, 82, 10, 0.16);

  /* Yellow */
  --color-yellow-100: #fff9e5;
  --color-yellow-200: #fff5d6;
  --color-yellow-300: #fff0c2;
  --color-yellow-400: #ffe9a8;
  --color-yellow-500: #fee18b;
  --color-yellow-600: #fbd86f;
  --color-yellow-700: #f8cd4f;
  --color-yellow-800: #f5c32e;
  --color-yellow-900: #f5ba0a;
  --color-yellow-1000: #d6a100;
  --color-yellow-1100: #ad8200;
  --color-yellow-1200: #856300;
  --color-yellow-1300: #664d00;
  --color-yellow-1400: #473600;
  --color-yellow-900-4a: rgba(245, 186, 10, 0.04);
  --color-yellow-900-16a: rgba(245, 186, 10, 0.16);
  --color-yellow-1000-16a: rgba(214, 161, 0, 0.16);
  --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);

  /* Orange */
  --color-orange-100: #fff2db;
  --color-orange-200: #ffeccc;
  --color-orange-300: #ffe0ad;
  --color-orange-400: #ffce85;
  --color-orange-500: #ffba61;
  --color-orange-600: #ffaf4d;
  --color-orange-700: #ffa238;
  --color-orange-800: #ff931f;
  --color-orange-900: #ff8000;
  --color-orange-1000: #e56f00;
  --color-orange-1100: #cc5f00;
  --color-orange-1200: #b24d00;
  --color-orange-1300: #7a2f00;
  --color-orange-1400: #5c2200;
  --color-orange-1000-4a: rgba(229, 111, 0, 0.04);
  --color-orange-1000-16a: rgba(229, 111, 0, 0.16);

  /* Violet */
  --color-violet-100: #f7f0ff;
  --color-violet-200: #ebdbff;
  --color-violet-300: #dec7ff;
  --color-violet-400: #d3b4fd;
  --color-violet-500: #c7a0fd;
  --color-violet-600: #b689fb;
  --color-violet-700: #a771f9;
  --color-violet-800: #9657f4;
  --color-violet-900: #823aee;
  --color-violet-1000: #6f21e4;
  --color-violet-1100: #601ec2;
  --color-violet-1200: #531ba7;
  --color-violet-1300: #3e0e8b;
  --color-violet-1400: #2b0868;
  --color-violet-1000-16a: rgba(111, 33, 228, 0.16);

  /* Indigo */
  --color-indigo-100: #f2f3fd;
  --color-indigo-200: #daddfb;
  --color-indigo-300: #c8ccf9;
  --color-indigo-400: #bbc0f7;
  --color-indigo-500: #a8aff5;
  --color-indigo-600: #919af2;
  --color-indigo-700: #7d86ed;
  --color-indigo-800: #6873e8;
  --color-indigo-900: #5460e3;
  --color-indigo-1000: #3b48de;
  --color-indigo-1100: #1f2ed6;
  --color-indigo-1200: #1422b8;
  --color-indigo-1300: #0d1677;
  --color-indigo-1400: #0b1365;
  --color-indigo-1000-16a: rgba(59, 72, 222, 0.16);

  /* Lime */
  --color-lime-100: #ecffd1;
  --color-lime-200: #defcb0;
  --color-lime-300: #cbf98b;
  --color-lime-400: #b9f466;
  --color-lime-500: #a7ef43;
  --color-lime-600: #9aeb28;
  --color-lime-700: #8ce114;
  --color-lime-800: #7ecf0c;
  --color-lime-900: #70bc06;
  --color-lime-1000: #62a701;
  --color-lime-1100: #508901;
  --color-lime-1200: #3e6b00;
  --color-lime-1300: #294600;
  --color-lime-1400: #1b2e00;
  --color-lime-900-16a: rgba(112, 188, 6, 0.16);
  --color-lime-1000-16a: rgba(98, 167, 1, 0.16);

  /* Cyan */
  --color-cyan-100: #dbfaff;
  --color-cyan-200: #bdf5ff;
  --color-cyan-300: #99eeff;
  --color-cyan-400: #8beafd;
  --color-cyan-500: #7ee6fb;
  --color-cyan-600: #68def8;
  --color-cyan-700: #52d6f4;
  --color-cyan-800: #31cbf2;
  --color-cyan-900: #15c3ef;
  --color-cyan-1000: #0fabd2;
  --color-cyan-1100: #0589ad;
  --color-cyan-1200: #006280;
  --color-cyan-1300: #003f52;
  --color-cyan-1400: #00232e;

  /* Sea */
  --color-sea-100: #ddfdfa;
  --color-sea-200: #c4f8f3;
  --color-sea-300: #a5f3ec;
  --color-sea-400: #8ceee7;
  --color-sea-500: #73e7e0;
  --color-sea-600: #5ce0d7;
  --color-sea-700: #45d9cf;
  --color-sea-800: #23d7cb;
  --color-sea-900: #16c0b7;
  --color-sea-1000: #0ca79f;
  --color-sea-1100: #04867f;
  --color-sea-1200: #00615c;
  --color-sea-1300: #00423f;
  --color-sea-1400: #002927;

  /* Magenta */
  --color-magenta-100: #fff0f5;
  --color-magenta-200: #ffdbe8;
  --color-magenta-300: #ffc2d8;
  --color-magenta-400: #ffadcb;
  --color-magenta-500: #ff99c0;
  --color-magenta-600: #ff85b4;
  --color-magenta-700: #fe71a7;
  --color-magenta-800: #fc5a98;
  --color-magenta-900: #fa428c;
  --color-magenta-1000: #f7267a;
  --color-magenta-1100: #e40763;
  --color-magenta-1200: #b00753;
  --color-magenta-1300: #850040;
  --color-magenta-1400: #520029;

  /* Pink */
  --color-pink-100: #fff0fd;
  --color-pink-200: #ffe0fb;
  --color-pink-300: #ffd1f9;
  --color-pink-400: #ffc7f7;
  --color-pink-500: #febdf7;
  --color-pink-600: #fdaff5;
  --color-pink-700: #fca1f6;
  --color-pink-800: #f88cf2;
  --color-pink-900: #f47cf2;
  --color-pink-1000: #ed68ed;
  --color-pink-1100: #d016d0;
  --color-pink-1200: #ae09ae;
  --color-pink-1300: #510151;
  --color-pink-1400: #410c40;

  /* Gray */
  --color-gray-100: #f7f7f7;
  --color-gray-200: #ebebeb;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #d4d4d4;
  --color-gray-500: #c4c4c4;
  --color-gray-600: #b5b5b5;
  --color-gray-700: #a3a3a3;
  --color-gray-800: #858585;
  --color-gray-900: #636363;
  --color-gray-1000: #575757;
  --color-gray-1100: #424242;
  --color-gray-1200: #333333;
  --color-gray-1300: #242424;
  --color-gray-1400: #1a1a1a;
  --color-gray-100-40a: rgba(247, 247, 247, 0.4);
  --color-gray-400-16a: rgba(212, 212, 212, 0.16);
  --color-gray-1400-16a: rgba(26, 26, 26, 0.16);
  --color-gray-1400-48a: rgba(26, 26, 26, 0.48);
  --color-gray-1400-64a: rgba(26, 26, 26, 0.64);
  --color-gray-1400-80a: rgba(26, 26, 26, 0.8);

  /* Defaults */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-white-48a: rgba(255, 255, 255, 0.48);
  --color-white-80a: rgba(255, 255, 255, 0.8);

  /**** Semantic Colors (mapped to primitives) ****/

  /* Warning (Yellow) */
  --haldi: var(--color-yellow-900);
  --haldi-dark: var(--color-yellow-1100);
  --haldi-darker: var(--color-yellow-1300);
  --haldi-light: var(--color-yellow-700);
  --haldi-lighter: var(--color-yellow-500);
  --haldi-lightest: var(--color-yellow-200);

  /* Primary (Blue) */
  --jal: var(--color-blue-1000);
  --jal-dark: var(--color-blue-1200);
  --jal-darker: var(--color-blue-1300);
  --jal-light: var(--color-blue-700);
  --jal-lighter: var(--color-blue-500);
  --jal-lightest: var(--color-blue-200);

  /* Accent 2 (Violet) */
  --jamun: var(--color-violet-1000);
  --jamun-dark: var(--color-violet-1200);
  --jamun-darker: var(--color-violet-1400);
  --jamun-light: var(--color-violet-700);
  --jamun-lighter: var(--color-violet-500);
  --jamun-lightest: var(--color-violet-200);

  /* Alert (Red) */
  --mirch: var(--color-red-1000);
  --mirch-dark: var(--color-red-1200);
  --mirch-darker: var(--color-red-1300);
  --mirch-light: var(--color-red-700);
  --mirch-lighter: var(--color-red-500);
  --mirch-lightest: var(--color-red-200);

  /* Accent 3 (Indigo) */
  --neel: var(--color-indigo-1000);
  --neel-dark: var(--color-indigo-1200);
  --neel-darker: var(--color-indigo-1400);
  --neel-light: var(--color-indigo-700);
  --neel-lighter: var(--color-indigo-500);
  --neel-lightest: var(--color-indigo-200);

  /* Success (Green) */
  --neem: var(--color-green-1000);
  --neem-dark: var(--color-green-1200);
  --neem-darker: var(--color-green-1300);
  --neem-light: var(--color-green-700);
  --neem-lighter: var(--color-green-500);
  --neem-lightest: var(--color-green-200);

  /* Neutral (Gray) */
  --night: var(--color-gray-1400);
  --night-light: var(--color-gray-1100);
  --night-lighter: var(--color-gray-900);
  --night-lightest: var(--color-gray-700);

  /* Accent 4 (Lime) */
  --nimbu: var(--color-lime-900);
  --nimbu-dark: var(--color-lime-1100);
  --nimbu-darker: var(--color-lime-1300);
  --nimbu-light: var(--color-lime-700);
  --nimbu-lighter: var(--color-lime-500);
  --nimbu-lightest: var(--color-lime-200);

  /* Shadows */
  --shadow-0: #ffffff;
  --shadow-10: #ffffff;
  --shadow-20: #ffffff;
  --shadow-30: #ffffff;

  /* Secondary (Gray) */
  --stone: var(--color-gray-400);
  --stone-dark: var(--color-gray-500);
  --stone-light: var(--color-gray-300);
  --stone-lighter: var(--color-gray-200);
  --stone-lightest: var(--color-gray-100);

  /* Accent 1 (Orange) */
  --tawak: var(--color-orange-1000);
  --tawak-dark: var(--color-orange-1200);
  --tawak-darker: var(--color-orange-1300);
  --tawak-light: var(--color-orange-700);
  --tawak-lighter: var(--color-orange-500);
  --tawak-lightest: var(--color-orange-200);

  --white: var(--color-white);

  /**** Fonts ****/
} /* close :root */

:root {
  /* Colors */

  /* default */
  --primary: var(--jal);
  --secondary: var(--stone);
  --success: var(--neem);
  --alert: var(--mirch);
  --warning: var(--haldi);
  --accent1: var(--tawak);
  --accent2: var(--jamun);
  --accent3: var(--neel);
  --accent4: var(--nimbu);
  --inverse: var(--night);

  /* dark */
  --primary-dark: var(--jal-dark);
  --secondary-dark: var(--stone-dark);
  --success-dark: var(--neem-dark);
  --alert-dark: var(--mirch-dark);
  --warning-dark: var(--haldi-dark);
  --accent1-dark: var(--tawak-dark);
  --accent2-dark: var(--jamun-dark);
  --accent3-dark: var(--neel-dark);
  --accent4-dark: var(--nimbu-dark);

  /* darker */
  --primary-darker: var(--jal-darker);
  --success-darker: var(--neem-darker);
  --alert-darker: var(--mirch-darker);
  --warning-darker: var(--haldi-darker);
  --accent1-darker: var(--tawak-darker);
  --accent2-darker: var(--jamun-darker);
  --accent3-darker: var(--neel-darker);
  --accent4-darker: var(--nimbu-darker);

  /* light */
  --primary-light: var(--jal-light);
  --secondary-light: var(--stone-light);
  --success-light: var(--neem-light);
  --alert-light: var(--mirch-light);
  --warning-light: var(--haldi-light);
  --accent1-light: var(--tawak-light);
  --accent2-light: var(--jamun-light);
  --accent3-light: var(--neel-light);
  --accent4-light: var(--nimbu-light);
  --inverse-light: var(--night-light);

  /* lighter */
  --primary-lighter: var(--jal-lighter);
  --secondary-lighter: var(--stone-lighter);
  --success-lighter: var(--neem-lighter);
  --alert-lighter: var(--mirch-lighter);
  --warning-lighter: var(--haldi-lighter);
  --accent1-lighter: var(--tawak-lighter);
  --accent2-lighter: var(--jamun-lighter);
  --accent3-lighter: var(--neel-lighter);
  --accent4-lighter: var(--nimbu-lighter);
  --inverse-lighter: var(--night-lighter);

  /* lightest */
  --primary-lightest: var(--jal-lightest);
  --secondary-lightest: var(--stone-lightest);
  --success-lightest: var(--neem-lightest);
  --alert-lightest: var(--mirch-lightest);
  --warning-lightest: var(--haldi-lightest);
  --accent1-lightest: var(--tawak-lightest);
  --accent2-lightest: var(--jamun-lightest);
  --accent3-lightest: var(--neel-lightest);
  --accent4-lightest: var(--nimbu-lightest);
  --inverse-lightest: var(--night-lightest);

  /* Focus */
  --primary-focus: var(--primary-dark);
  --inverse-focus: var(--night);

  /* Ultra Light */
  --primary-ultra-light: var(--color-blue-100);
  --success-ultra-light: var(--color-green-100);
  --alert-ultra-light: var(--color-red-100);
  --warning-ultra-light: var(--color-yellow-100);
  --accent1-ultra-light: var(--color-orange-100);
  --accent2-ultra-light: var(--color-violet-100);
  --accent3-ultra-light: var(--color-indigo-100);
  --accent4-ultra-light: var(--color-lime-100);

  /* Avatar specific color for the time being */
  --primary-300: var(--color-blue-300);
  --success-300: var(--color-green-300);
  --alert-300: var(--color-red-300);
  --warning-300: var(--color-yellow-300);
  --accent1-300: var(--color-orange-300);
  --accent2-300: var(--color-violet-300);
  --accent3-300: var(--color-indigo-300);
  --accent4-300: var(--color-lime-300);

  /* shadow */
  --primary-shadow: rgba(0, 96, 214, 0.16);
  --secondary-shadow: rgba(212, 212, 212, 0.16);
  --success-shadow: rgba(0, 122, 14, 0.16);
  --alert-shadow: rgba(214, 36, 0, 0.16);
  --warning-shadow: rgba(245, 186, 10, 0.16);
  --accent1-shadow: rgba(229, 111, 0, 0.16);
  --accent2-shadow: rgba(111, 33, 228, 0.16);
  --accent3-shadow: rgba(59, 72, 222, 0.16);
  --accent4-shadow: rgba(112, 188, 6, 0.16);
  --inverse-shadow: rgba(26, 26, 26, 0.16);

  /* Text colors */
  --text: var(--night);
  --text-subtle: var(--night-lighter);
  --text-link: var(--primary);
  --text-disabled: var(--inverse-lightest);
  --text-destructive: var(--alert);
  --text-white: var(--white);
  --text-success: var(--success);

  /* spacing - DEPRECATED */
  --spacing-xs: 1px;
  --spacing-s: 2px;
  --spacing-m: 4px;
  --spacing-0-75: 6px;
  --spacing: 8px;
  --spacing-l: 12px;
  /* 8 * 2 */
  --spacing-2: 16px;
  /* 8 * 3 */
  --spacing-xl: 24px;
  /* 8 * 4 */
  --spacing-3: 32px;
  /* 8 * 6 */
  --spacing-4: 48px;
  /* 8 * 8 */
  --spacing-5: 64px;
  /* 8 * 12 */
  --spacing-6: 96px;
  /* 8 * 16 */
  --spacing-7: 128px;
  /* 8 * 22 */
  --spacing-8: 176px;
  /* 8 * 32 */
  --spacing-9: 256px;

  /* Fonts */
  --font-family: 'Nunito Sans';

  /* Font size */
  --font-size-xxs: 4px;
  --font-size-xs: 8px;
  --font-size-s: 12px;
  --font-size: 14px;
  --font-size-m: 16px;
  --font-size-l: 20px;
  --font-size-xl: 28px;
  --font-size-xxl: 32px;
  --font-size-xxxl: 40px;

  /* Font weight  */
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-bolder: 800;

  /* Line height or Font height  */
  --font-height-normal: normal;
  --font-height-s: 16px;
  --font-height: 20px;
  --font-height-m: 24px;
  --font-height-l: 32px;
  --font-height-xl: 40px;
  --font-height-xxl: 48px;

  /* Letter spacing */
  --letter-spacing: 0.5px;

  /* body settings */

  /* border */
  --border: var(--border-width-2-5) solid var(--secondary);
  --border-s: var(--border-width-05) solid var(--secondary);

  /* padding */

  /* shadow */
  --shadow-s: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-m: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-l: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
  --shadow-spread: 0 0 0 3px;

  /* 
  Grid breakpoints
  Define the minimum dimensions at which your layout will change,
  adapting to different screen sizes, for use in media queries. 
  */

  --grid-s-breakpoint: 576px;
  --grid-m-breakpoint: 768px;
  --grid-l-breakpoint: 992px;
  --grid-xl-breakpoint: 1200px;

  /* 
  Grid columns
  Set the number of columns and specify the width of the gutters. 
  */

  --grid-columns: 12;

  /* Undefined colors */
  --card-subdued-bg: #fcfafa;

  /* Transparancy (Opacity) */
  --transparent-58: 0.58;

  /* Transition curve timing function */
  /* Use standard-easing when an element is visible from the beginning to the end of a motion. Ex-Expanding cards. */
  --standard-productive-curve: cubic-bezier(0.2, 0, 0.38, 0.9);
  --standard-expressive-curve: cubic-bezier(0.4, 0.14, 0.3, 1);
  /* Use entrance-easing when an element quickly appears and slows down to a stop. Ex-when adding elements to the view, such as a modal appearing. */
  --entrance-productive-curve: cubic-bezier(0, 0, 0.38, 0.9);
  --entrance-expressive-curve: cubic-bezier(0, 0, 0.3, 1);
  /* Use exit-easing when removing elements from view, such as closing a modal or toaster. */
  --exit-productive-curve: cubic-bezier(0.2, 0, 1, 0.9);
  --exit-expressive-curve: cubic-bezier(0.4, 0.14, 1, 1);

  /* Transition duration */
  --duration--fast-01: 80ms;
  --duration--fast-02: 120ms;
  --duration--moderate-01: 160ms;
  --duration--moderate-02: 240ms;
  --duration--slow-01: 400ms;
  --duration--slow-02: 720ms;

  /* Opacity */
  --opacity-1: 0.04;
  --opacity-2: 0.08;
  --opacity-3: 0.12;
  --opacity-4: 0.16;
  --opacity-6: 0.24;
  --opacity-8: 0.32;
  --opacity-10: 0.4;
  --opacity-12: 0.48;
  --opacity-16: 0.64;
  --opacity-20: 0.8;

  /* Spacing (value / 4) * 10 */
  --spacing-2-5: 1px;
  --spacing-05: 2px;
  --spacing-10: 4px;
  --spacing-15: 6px;
  --spacing-20: 8px;
  --spacing-30: 12px;
  --spacing-40: 16px;
  --spacing-60: 24px;
  --spacing-80: 32px;
  --spacing-120: 48px;
  --spacing-160: 64px;
  --spacing-240: 96px;
  --spacing-320: 128px;
  --spacing-440: 176px;
  --spacing-640: 256px;

  /* Border Radius */
  --border-radius-2-5: 1px;
  --border-radius-05: 2px;
  --border-radius-10: 4px;
  --border-radius-15: 6px;
  --border-radius-20: 8px;
  --border-radius-30: 12px;
  --border-radius-40: 16px;
  --border-radius-full: 9999px;

  /* Border Width */
  --border-width-2-5: 1px;
  --border-width-05: 2px;
  --border-width-7-5: 3px;
  --border-width-10: 4px;
}

/* fallback */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 300;
  src: url(MaterialSymbolsRounded.woff2) format('woff2');
}

.material-symbols {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn var(--duration--fast-02) var(--standard-productive-curve);
}

.fade-out {
  animation: fadeOut var(--duration--fast-02) var(--standard-expressive-curve);
}

.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 1;
}

@keyframes exitLeftCurve {
  from {
    opacity: 1;
    left: 0;
  }

  to {
    opacity: 0;
    left: calc(-1 * var(--spacing-40));
  }
}

@keyframes entryLeftCurve {
  from {
    left: var(--spacing-40);
  }

  to {
    left: 0;
  }
}

@keyframes exitRightCurve {
  from {
    opacity: 1;
    left: 0;
  }

  to {
    opacity: 0;
    left: var(--spacing-40);
  }
}

@keyframes entryRightCurve {
  from {
    left: calc(-1 * var(--spacing-40));
  }

  to {
    left: 0;
  }
}

.slideOut-left {
  animation: exitLeftCurve var(--duration--moderate-02) var(--exit-expressive-curve);
  animation-fill-mode: forwards;
}

.slideIn-left {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-expressive-curve),
    entryLeftCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
}

.slideOut-right {
  animation: exitRightCurve var(--duration--moderate-02) var(--exit-expressive-curve);
  animation-fill-mode: forwards;
}

.slideIn-right {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-expressive-curve),
    entryRightCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
}

.rotate-clockwise {
  transform: rotateZ(360deg);
  transition: var(--duration--moderate-02) var(--standard-productive-curve);
  animation-fill-mode: forwards;
}

.rotate-anticlockwise {
  transform: rotateZ(180deg);
  transition: var(--duration--moderate-02) var(--standard-productive-curve);
}

.shimmer-text {
  text-align: center;
  background: var(--inverse-light);
  color: rgba(47, 47, 47, 0.1) !important;
  background: linear-gradient(to right, var(--inverse-light) 0%, var(--secondary-dark) 50%, var(--inverse-light) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: shimmerText 2s infinite linear forwards;
  background-clip: text;
}

@keyframes shimmerText {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.ss {
  background: red;
}

body {
  font-family: var(--font-family);
  color: var(--text);
  line-height: var(--font-height);
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
}

.PopperWrapper-trigger {
  display: inline-flex;
  flex-grow: 1;
}

.Overlay-container {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  z-index: 1500;
}

.Overlay-container--open {
  animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
}

.Overlay-container--close {
  animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-dark);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--inverse-lightest);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--inverse-lighter);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Text */
.Text {
  margin: 0;
  line-height: var(--font-height);
}

.Text--small {
  font-size: var(--font-size-s);
  line-height: var(--font-height-normal);
  font-weight: var(--font-weight-medium);
}

.Text--regular {
  font-size: var(--font-size);
  line-height: var(--font-height);
}

.Text--large {
  font-size: var(--font-size-m);
  line-height: var(--font-height-m);
}

.Text--default {
  color: var(--text);
}

.Text--subtle {
  color: var(--text-subtle);
}

.Text--disabled {
  color: var(--text-disabled);
}

.Text--destructive {
  color: var(--text-destructive);
}

.Text--white {
  color: var(--text-white);
}

.Text--success {
  color: var(--text-success);
}

.Text--link {
  color: var(--text-link);
}

.Text--medium {
  font-weight: var(--font-weight-medium);
}

.Text--strong {
  font-weight: var(--font-weight-bold);
}

/* Heading */
.Heading {
  margin: 0;
}

.Heading--s {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-m);
  line-height: var(--font-height-m);
}

.Heading--m {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-height-l);
}

.Heading--l {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xl);
  line-height: var(--font-height-xl);
}

.Heading--xl {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xxl);
  line-height: var(--font-height-xxl);
}

.Heading--xxl {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xxxl);
  line-height: var(--font-height-xxl);
}

.Heading--default {
  color: var(--text);
}

.Heading--subtle {
  color: var(--text-subtle);
}

.Heading--disabled {
  color: var(--text-disabled);
}

.Heading--white {
  color: var(--text-white);
}

/* Label */
.Label {
  display: inline-flex;
}
.Label--small {
  font-size: var(--font-size-s);
}

.Label--withInput {
  margin-bottom: var(--spacing-10);
}

.Label--optional {
  align-items: center;
}

.Label-text {
  line-height: var(--font-height-s);
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

.Label-optionalText {
  line-height: var(--font-height-s);
  margin-left: var(--spacing-10);
}

.Label-optionalText--small {
  font-size: var(--font-size-s);
}

.Label--disabled {
  color: var(--text-disabled);
}

.Label-requiredIndicator {
  height: var(--spacing-15);
  width: var(--spacing-15);
  border-radius: var(--border-radius-full);
  background: var(--alert);
  margin-left: var(--spacing-10);
  margin-bottom: var(--spacing-15);
  display: inline-flex;
}

/* Caption */
.Caption {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.Caption--withInput {
  margin-top: var(--spacing-10);
}

.Caption-icon {
  display: flex;
  align-content: center;
  margin-right: var(--spacing-10);
}

.Caption--hidden {
  display: none;
}

/* Subheading */
.Subheading {
  margin: 0;
  font-weight: var(--font-weight-bolder);
  font-size: var(--spacing-30);
  line-height: var(--font-height-m);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}

.Subheading--default {
  color: var(--text);
}

.Subheading--subtle {
  color: var(--text-subtle);
}

.Subheading--disabled {
  color: var(--text-disabled);
}

.Subheading--white {
  color: var(--text-white);
}

.ActionButton {
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  color: var(--inverse-lighter);
  border-radius: var(--border-radius-full);
  padding: var(--spacing-05);
}

.ActionButton:focus-visible,
.ActionButton:focus {
  outline: var(--spacing-05) solid var(--primary-focus);
}

.ActionButton:hover {
  background-color: var(--secondary);
}

.ActionButton:active {
  background-color: var(--secondary-dark);
}

.ActionCard {
  border-radius: var(--border-radius-10);
  width: 100%;
}

.ActionCard--default {
  cursor: pointer;
  border: var(--border-width-2-5) solid var(--secondary-dark);
}

.ActionCard--default:hover {
  box-shadow: var(--shadow-l);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.ActionCard--default:focus,
.ActionCard--default:focus-visible {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
}

.ActionCard--default:active {
  box-shadow: var(--shadow-m);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.ActionCard--disabled {
  cursor: not-allowed;
  position: relative;
  border: var(--border-width-2-5) solid var(--secondary-lighter);
}

.ActionCard-overlay--disabled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: var(--opacity-10);
  background: var(--secondary-lightest);
}

/* Avatar */

.Avatar {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-transform: uppercase;
  border-radius: var(--border-radius-full);
  cursor: default;
  position: relative;
}

.Avatar-wrapper:has(.Avatar:focus-visible)::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--spacing-20));
  bottom: calc(-1 * var(--spacing-20));
  left: calc(-1 * var(--spacing-10));
  right: calc(-1 * var(--spacing-10));
  border: var(--border-width-05) solid var(--primary-focus);
  border-radius: var(--border-radius-10);
  pointer-events: none;
}

.Avatar:focus-visible {
  /* Fallback focus ring for browsers without :has support */
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
}

@supports selector(.Avatar-wrapper:has(.Avatar:focus-visible)) {
  .Avatar:focus-visible {
    outline: none;
  }
}

.Avatar-wrapper--square {
  padding: var(--spacing-2-5);
  box-sizing: border-box;
}

.Avatar-wrapper {
  position: relative;
}

.Avatar--square {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-10);
}

.Avatar--regular {
  height: var(--spacing-80);
  width: var(--spacing-80);
}

.Avatar--tiny {
  height: var(--spacing-60);
  width: var(--spacing-60);
}

.Avatar--micro {
  height: 20px;
  width: 20px;
}

.Avatar--noInitials {
  cursor: default;
}

.Avatar--disabled {
  cursor: not-allowed;
}

.Avatar--disabled::after {
  opacity: var(--opacity-16);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  content: '';
  background-color: var(--white);
}

.Avatar--primary {
  background: var(--primary-300);
}

.Avatar--secondary {
  background: var(--secondary-light);
}

.Avatar--success {
  background: var(--success-300);
}

.Avatar--alert {
  background: var(--alert-300);
}

.Avatar--warning {
  background: var(--warning-300);
}

.Avatar--accent1 {
  background: var(--accent1-300);
}

.Avatar--accent2 {
  background: var(--accent2-300);
}

.Avatar--accent3 {
  background: var(--accent3-300);
}

.Avatar--accent4 {
  background: var(--accent4-300);
}

.Avatar-content--tiny {
  line-height: var(--font-height-s) !important;
  font-size: 10px !important;
}

.Avatar-content--micro {
  line-height: var(--font-height-s) !important;
  font-size: 10px !important;
}

.Avatar-content--primary {
  color: var(--primary-darker) !important;
}

.Avatar-content--secondary {
  color: var(--inverse) !important;
}

.Avatar-content--success {
  color: var(--success-darker) !important;
}

.Avatar-content--alert {
  color: var(--alert-darker) !important;
}

.Avatar-content--warning {
  color: var(--warning-darker) !important;
}

.Avatar-content--accent1 {
  color: var(--accent1-darker) !important;
}

.Avatar-content--accent2 {
  color: var(--accent2-darker) !important;
}

.Avatar-content--accent3 {
  color: var(--accent3-darker) !important;
}

.Avatar-content--accent4 {
  color: var(--accent4-darker) !important;
}

.Avatar-presence {
  position: absolute;
  border-radius: var(--border-radius-full);
  width: var(--spacing-20);
  height: var(--spacing-20);
  right: 0;
  bottom: 0;
}

.Avatar-presence--active {
  background: var(--success);
}

.Avatar-presence--away {
  background: var(--secondary-dark);
}

.Avatar-status {
  top: calc(-1 * var(--spacing-05));
  right: calc(-1 * var(--spacing-05));
  width: var(--spacing-30);
  height: var(--spacing-30);
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
}

.AvatarGroup-item {
  border-radius: var(--border-radius-full);
  position: relative;
  margin-right: calc(var(--spacing-05) * -1);
}

.AvatarGroup-item--square {
  border-radius: var(--border-radius-10);
}

.AvatarGroup-item--regular {
  height: var(--spacing-80);
}

.AvatarGroup-item--tiny {
  height: var(--spacing-60);
  margin-right: 0;
}

.AvatarGroup-item--micro {
  margin-right: var(--spacing-10);
}

.AvatarGroup-Popper {
  overflow-y: auto;
  box-sizing: border-box;
}

.AvatarGroup-TextWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
}

.AvatarCount-wrapper {
  border-radius: var(--border-radius-full);
  position: relative;
  display: flex;
  align-items: center;
}

.AvatarCount-wrapper:focus-visible {
  outline: none;
}

.AvatarCount-wrapper:focus-visible::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--spacing-20));
  bottom: calc(-1 * var(--spacing-20));
  left: calc(-1 * var(--spacing-10));
  right: calc(-1 * var(--spacing-10));
  border: var(--border-width-05) solid var(--primary-focus);
  border-radius: var(--border-radius-10);
  pointer-events: none;
}

.AvatarGroup-inputWrapper {
  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
}

.AvatarGroup-inputWrapper:focus-within {
  border-bottom: var(--border-width-2-5) solid var(--primary);
}

.AvatarGroup-input {
  min-width: unset !important;
  background: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: calc(var(--spacing-80) + var(--spacing-10)) !important;
}

.AvatarGroup-input,
.AvatarGroup-input:focus-within {
  border: unset !important;
  box-shadow: none !important;
  outline: none !important;
}

.AvatarGroup-input:hover {
  background-color: var(--secondary-lightest);
}

.AvatarGroup-listItem--disabled {
  cursor: not-allowed;
  pointer-events: auto !important;
}

/* Selection avatar group */
.SelectionAvatarGroup {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Selection Avatar List */

.SelectionAvatarGroup-item {
  margin-right: calc(var(--spacing-05) * -1);
  border-radius: var(--border-radius-full);
  display: flex;
  transition: transform var(--duration--fast-01) var(--standard-productive-curve);
  position: relative;
}

.SelectionAvatarGroup-item--tiny {
  margin-right: 0;
}

.SelectionAvatarGroup-item--micro {
  margin-right: var(--spacing-10);
}

.SelectionAvatarGroup-item--active:focus,
.SelectionAvatarGroup-item--active:focus-visible {
  outline: 3px solid var(--primary-shadow);
  outline-offset: 3px;
}

.SelectionAvatarGroup-item--active:active {
  outline: var(--border-width-2-5) solid var(--primary-dark);
  outline-offset: var(--spacing-2-5);
}

.SelectionAvatarGroup-item--active-tiny:active,
.SelectionAvatarGroup-item--active-micro:active {
  outline-offset: var(--spacing-05);
}

.SelectionAvatarGroup-item--active-regular:active {
  outline: var(--border-width-05) solid var(--primary-dark);
  outline-offset: var(--spacing-2-5);
}

.SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item--active {
  transform: translateY(-8px);
}

/* Selected Avatar Group Item */

.SelectionAvatarGroup-item--selected {
  outline-offset: var(--spacing-2-5);
  outline: var(--border-width-2-5) solid var(--primary-dark);
}

.SelectionAvatarGroup-item--selected-tiny,
.SelectionAvatarGroup-item--selected-micro {
  outline-offset: var(--spacing-05);
}

.SelectionAvatarGroup-item--selected-regular {
  outline: var(--border-width-05) solid var(--primary-dark);
}

.SelectionAvatarGroup-item--selected:active {
  outline-offset: var(--spacing-2-5);
  outline: var(--border-width-2-5) solid var(--primary-darker);
}

.SelectionAvatarGroup-item--selected-tiny:active,
.SelectionAvatarGroup-item--selected-micro:active {
  outline-offset: var(--spacing-05);
}

.SelectionAvatarGroup-item--selected-regular:active {
  outline-offset: var(--spacing-2-5);
  outline: var(--border-width-05) solid var(--primary-darker);
}

.SelectionAvatarGroup-item--selected:focus,
.SelectionAvatarGroup-item--selected:focus-visible {
  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
}

/* Selection Avatar Popover */

.SelectionAvatarGroup-popper {
  overflow-y: auto;
  box-sizing: border-box;
}

.SelectionAvatar-inputWrapper {
  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
}

.SelectionAvatar-inputWrapper:focus-within {
  border-bottom: var(--border-width-2-5) solid var(--primary);
}

.SelectionAvatar-input {
  min-width: unset !important;
  background: transparent;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0;
  height: 36px;
}

.SelectionAvatar-input,
.SelectionAvatar-input:focus-within {
  border: unset !important;
  box-shadow: none !important;
  outline: none !important;
}

.SelectionAvatar-input:hover {
  background-color: var(--secondary-lightest);
}

/* Selection Avatar Count */

.SelectionAvatarCount-wrapper {
  border-radius: var(--border-radius-full);
}

.SelectionAvatarCount-wrapper--micro {
  margin-right: 0;
}

.SelectionAvatarCount:hover {
  background: var(--secondary);
}

.SelectionAvatarCount:active {
  background: var(--secondary-dark);
}

.SelectionAvatarCount--open {
  background: var(--secondary-dark) !important;
}

.SelectionAvatarCount-wrapper:focus {
  outline: none;
}

.SelectionAvatarCount-wrapper:focus-visible {
  outline: none;
}

.SelectionAvatarCount-wrapper:focus-visible::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--spacing-20));
  bottom: calc(-1 * var(--spacing-20));
  left: calc(-1 * var(--spacing-10));
  right: calc(-1 * var(--spacing-10));
  border: var(--border-width-05) solid var(--primary-focus);
  border-radius: var(--border-radius-10);
  pointer-events: none;
}

.SelectionAvatarCount--selected {
  outline-offset: var(--spacing-2-5);
  outline: var(--border-width-2-5) solid var(--primary-dark);
}

.SelectionAvatarCount--selected-tiny,
.SelectionAvatarCount--selected-micro {
  outline-offset: var(--spacing-05);
}

.SelectionAvatarCount--selected-regular {
  outline: var(--border-width-05) solid var(--primary-dark);
}

.SelectionAvatarCount--selected:active {
  outline-offset: var(--spacing-2-5);
  outline: var(--border-width-2-5) solid var(--primary-darker);
}

.SelectionAvatarCount--selected-tiny:active,
.SelectionAvatarCount--selected-micro:active {
  outline-offset: var(--spacing-05);
}

.SelectionAvatarCount--selected-regular:active {
  outline-offset: var(--spacing-2-5);
  outline: var(--border-width-05) solid var(--primary-darker);
}

.SelectionAvatarCount--selected:focus,
.SelectionAvatarCount--selected:focus-visible {
  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
}

@keyframes backdrop-open {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--opacity-16);
  }
}

@keyframes backdrop-close {
  from {
    opacity: var(--opacity-16);
  }
  to {
    opacity: 0;
  }
}

.Backdrop {
  background-color: rgba(26, 26, 26, 0.64);
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  align-items: center;
  z-index: 1000;
  overflow: auto;
  flex-direction: column;
  justify-content: center;
  touch-action: none;
  visibility: hidden;
}

.Backdrop--open {
  display: flex;
  visibility: visible;
}

.Backdrop-animation--open {
  animation: backdrop-open var(--duration--fast-02) var(--entrance-expressive-curve);
}

.Backdrop-animation--close {
  animation: backdrop-close var(--duration--fast-02) var(--exit-expressive-curve);
}

/* badge */

.Badge {
  /* 160px */
  max-width: calc(var(--spacing-40) * 10);
  /* truncate */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-s);
  line-height: var(--font-height-s);
  text-transform: uppercase;
  padding-right: var(--spacing-10);
  padding-left: var(--spacing-10);
  padding-top: var(--spacing-05);
  padding-bottom: var(--spacing-05);
  border-radius: var(--border-radius-10);
  display: inline-block;
  box-sizing: border-box;
  font-weight: var(--font-weight-bold);
  cursor: default;
}

.Badge--primary {
  background: var(--primary);
  color: var(--white);
}

.Badge--secondary {
  background: var(--secondary-light);
  color: var(--inverse);
}

.Badge--success {
  background: var(--success);
  color: var(--white);
}

.Badge--alert {
  background: var(--alert);
  color: var(--white);
}

.Badge--warning {
  background: var(--warning);
  color: var(--warning-darker);
}

.Badge--accent1 {
  background: var(--accent1-dark);
  color: var(--white);
}

.Badge--accent2 {
  background: var(--accent2);
  color: var(--white);
}

.Badge--accent3 {
  background: var(--accent3);
  color: var(--white);
}

.Badge--accent4 {
  background: var(--accent4);
  color: var(--accent4-darker);
}

.Badge--subtle-primary {
  color: var(--primary-darker);
  background: var(--primary-lightest);
}

.Badge--subtle-secondary {
  color: var(--text);
  background: var(--secondary-light);
}

.Badge--subtle-success {
  color: var(--success-darker);
  background: var(--success-lightest);
}

.Badge--subtle-alert {
  color: var(--alert-darker);
  background: var(--alert-lightest);
}

.Badge--subtle-warning {
  color: var(--warning-darker);
  background: var(--warning-lightest);
}

.Badge--subtle-accent1 {
  color: var(--accent1-darker);
  background: var(--accent1-lightest);
}

.Badge--subtle-accent2 {
  color: var(--accent2-darker);
  background: var(--accent2-lightest);
}

.Badge--subtle-accent3 {
  color: var(--accent3-darker);
  background: var(--accent3-lightest);
}

.Badge--subtle-accent4 {
  color: var(--accent4-darker);
  background: var(--accent4-lightest);
}

/* breadcrumbs */

.Breadcrumbs {
  display: flex;
  align-items: center;
}

.Breadcrumbs-item {
  display: flex;
  align-items: center;
}

.Breadcrumbs-link {
  /* 160px */
  max-width: calc(var(--spacing-40) * 10);
  margin: var(--spacing-10) 0;
}

.Breadcrumbs-link:active {
  color: var(--inverse);
}

.Breadcrumbs-item:first-child .Breadcrumbs-link {
  margin-left: 0;
}

.Breadcrumbs-itemSeparator {
  color: var(--secondary);
  font-size: var(--font-size-s);
  line-height: var(--font-height-s);
  width: var(--spacing-10);
  margin: 0 var(--spacing-10);
}

.Breadcrumbs-dropdown {
  height: var(--font-height-m);
}

.Breadcrumbs-Button:focus {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
}

.Button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0;
  border-radius: var(--border-radius-10);

  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);

  text-align: center;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size);
  line-height: var(--font-height-s);
  color: var(--text-white);

  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Button:disabled {
  cursor: not-allowed;
}

.Button:focus {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
}

.Button--iconAlign-right {
  flex-direction: row-reverse;
}

.Button-regularIcon--left {
  margin-left: calc(-1 * var(--spacing-05));
}

.Button-regularIcon--right {
  margin-right: calc(-1 * var(--spacing-05));
}

.Button--tiny {
  height: var(--spacing-60);
  padding-right: var(--spacing-20);
  padding-left: var(--spacing-20);
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
}

.Button--tinySquare {
  width: var(--spacing-60);
}

.Button--regular {
  height: var(--spacing-80);
  padding-right: var(--spacing-30);
  padding-left: var(--spacing-30);
}

.Button--regularSquare {
  width: var(--spacing-80);
}

.Button--large {
  height: 40px;
  padding-right: var(--spacing-40);
  padding-left: var(--spacing-40);

  line-height: var(--font-height-m);
  font-size: var(--font-size-m);
}

.Button--largeSquare {
  width: 40px;
}

.Button--tinySquare .Button-icon,
.Button--largeSquare .Button-icon,
.Button--tinySquare .Spinner,
.Button--largeSquare .Spinner {
  padding-left: var(--spacing-05);
  padding-right: var(--spacing-05);
}

.Button--expanded {
  width: 100%;
}

.Button-icon {
  line-height: inherit;
  display: flex;
  align-items: center;
}

.Button-icon--left {
  margin-right: var(--spacing-15);
}

.Button-icon--right {
  margin-left: var(--spacing-15);
}

.Button--tiny .Button-icon--left {
  margin-right: var(--spacing-10);
}
.Button--tiny .Button-icon--right {
  margin-left: var(--spacing-10);
}

.Button--basic {
  background: var(--secondary-light);
  color: var(--inverse);
}

.Button--basic:hover {
  background: var(--secondary);
}

.Button--basic:active {
  background: var(--secondary-dark);
}

.Button--basic:disabled {
  background: var(--secondary-lighter);
  color: var(--inverse-lightest);
}

.Button--primary {
  background: var(--primary);
}

.Button--primary:hover {
  background: var(--primary-dark);
}

.Button--primary:active {
  background: var(--primary-darker);
}

.Button--primary:disabled {
  background: var(--primary-lighter);
}

.Button--success {
  background: var(--primary);
}

.Button--success:hover {
  background: var(--primary-dark);
}

.Button--success:active {
  background: var(--primary-darker);
}

.Button--success:disabled {
  background: var(--primary-lighter);
}

.Button--alert {
  background: var(--alert);
}

.Button--alert:hover {
  background: var(--alert-dark);
}

.Button--alert:active {
  background: var(--alert-darker);
}

.Button--alert:disabled {
  background: var(--alert-lighter);
}

.Button--transparent {
  background: transparent;
  color: var(--inverse);
}

.Button--transparent:hover {
  background: var(--secondary);
}

.Button--transparent:active {
  background: var(--secondary-dark);
}

.Button--transparent:focus:active {
  background: var(--secondary-dark);
}

.Button--transparent:disabled {
  background: transparent;
  color: var(--inverse-lightest);
}

.Button-spinner {
  display: flex;
  position: absolute;
  z-index: 1;
}

.Button--selected {
  background: var(--primary-ultra-light);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.Button--selected:hover {
  background: var(--primary-lightest);
}

.Button--selected:active {
  background: var(--primary-lighter);
  color: var(--primary-darker);
  box-shadow: inset 0 0 0 2px var(--primary-dark);
}

.Button--selected:focus {
  background: var(--primary-ultra-light);
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
}

.Button--selected:focus:active {
  background: var(--primary-lighter);
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
}

.Button--selected:disabled {
  background: var(--primary-ultra-light);
  color: var(--primary-lighter);
  box-shadow: inset 0 0 0 2px var(--primary-lightest);
}

.Button-text--hidden {
  visibility: hidden;
}

.Button-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* outlined button styles */

.Button-outlined--basic {
  color: var(--inverse);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--secondary);
}

.Button-outlined--basic:hover {
  background: var(--secondary-lighter);
  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
}

.Button-outlined--basic:active {
  background: var(--secondary);
  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
}

.Button-outlined--basic:focus {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
}

.Button-outlined--basic:disabled {
  color: var(--inverse-lightest);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--secondary);
}

.Button-outlined--selected {
  background: var(--primary-ultra-light);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.Button-outlined--selected:hover {
  background: var(--primary-lightest);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.Button-outlined--selected:active {
  background: var(--primary-lighter);
  color: var(--primary-darker);
  box-shadow: inset 0 0 0 2px var(--primary-dark);
}

.Button-outlined--selected:focus {
  color: var(--primary-dark);
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
}

.Button-outlined--selected:focus:active {
  background: var(--primary-lighter);
  color: var(--primary-darker);
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
}

.Button-outlined--selected:disabled {
  background: var(--primary-ultra-light);
  color: var(--primary-lighter);
  box-shadow: inset 0 0 0 2px var(--primary-lightest);
}

.Button-outlined--primary {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--primary);
  color: var(--primary);
}

.Button-outlined--primary:hover {
  background: var(--primary-ultra-light);
  box-shadow: inset 0 0 0 1px var(--primary-dark);
  color: var(--primary-dark);
}

.Button-outlined--primary:active {
  background: var(--primary-lightest);
  box-shadow: inset 0 0 0 1px var(--primary-dark);
  color: var(--primary-dark);
}

.Button-outlined--primary:focus {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
}

.Button-outlined--primary:disabled {
  background: transparent;
  color: var(--primary-lighter);
  box-shadow: inset 0 0 0 1px var(--primary-lighter);
}

.Button-outlined--alert {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--alert);
  color: var(--alert);
}

.Button-outlined--alert:hover {
  background: var(--alert-ultra-light);
  box-shadow: inset 0 0 0 1px var(--alert-dark);
  color: var(--alert-dark);
}

.Button-outlined--alert:active {
  background: var(--alert-lightest);
  box-shadow: inset 0 0 0 1px var(--alert-dark);
  color: var(--alert-dark);
}

.Button-outlined--alert:focus {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--border-width-2