@epam/assets 5.4.2 → 5.5.0

package/css/theme/theme_promo.css

@@ -38,12 +38,12 @@
   --red-60:#C03316;
   --red-70:#A02B13;
   --white:#FFFFFF;
-  --yellow-5:#FFFFF0;
-  --yellow-10:#FFFECC;
+  --yellow-5:#FFFFF5;
+  --yellow-10:#FFFFE5;
   --yellow-20:#FFFCA4;
   --yellow-50:#FDD63B;
-  --yellow-60:#F9B71D;
-  --yellow-70:#D3910C;
+  --yellow-60:#EDBE02;
+  --yellow-70:#BC7E02;
   --orange-5:#FEF8F4;
   --orange-10:#FFE8D7;
   --orange-20:#FFCCA7;
@@ -74,25 +74,18 @@
   --cobalt-50:#0F98FF;
   --cobalt-60:#006FE5;
   --cobalt-70:#0954A5;
-  --cyan-5:#F5FBFF;
+  --cyan-5:#F6FEFE;
   --cyan-10:#D1FAFA;
   --cyan-20:#AAEEEE;
   --cyan-50:#14CCCC;
-  --cyan-60:#0F9E9E;
+  --cyan-60:#12B5B5;
   --cyan-70:#0B6F6F;
   --mint-5:#F2FCF5;
   --mint-10:#DDF3E4;
   --mint-20:#B4DFC4;
   --mint-50:#4FC48C;
-  --mint-60:#2E9E68;
+  --mint-60:#31AA70;
   --mint-70:#236E4A;
-  --uui-accent-5:var(--green-5);
-  --uui-accent-10:var(--green-10);
-  --uui-accent-20:var(--green-20);
-  --uui-accent-50:var(--green-50);
-  --uui-accent-60:var(--green-60);
-  --uui-accent-70:var(--green-70);
-  --uui-accent-contrast:var(--white);
   --uui-primary-5:var(--blue-5);
   --uui-primary-10:var(--blue-10);
   --uui-primary-20:var(--blue-20);
@@ -100,6 +93,13 @@
   --uui-primary-60:var(--blue-60);
   --uui-primary-70:var(--blue-70);
   --uui-primary-contrast:var(--white);
+  --uui-accent-5:var(--green-5);
+  --uui-accent-10:var(--green-10);
+  --uui-accent-20:var(--green-20);
+  --uui-accent-50:var(--green-50);
+  --uui-accent-60:var(--green-60);
+  --uui-accent-70:var(--green-70);
+  --uui-accent-contrast:var(--white);
   --uui-secondary-5:var(--gray10);
   --uui-secondary-10:var(--gray20);
   --uui-secondary-20:var(--gray30);
@@ -432,36 +432,33 @@
   --uui-badge-caption:var(--uui-neutral-80);
   --uui-badge-caption-hover:var(--uui-neutral-80);
 }
-.uui-theme-promo .uui-badge.uui-color-neutral,
-.uui-theme-promo .uui-badge.uui-color-gray30{
+.uui-theme-promo .uui-badge.uui-color-neutral.uui-fill-solid,
+.uui-theme-promo .uui-badge.uui-color-gray30.uui-fill-solid{
   --uui-badge-bg:var(--uui-neutral-30);
   --uui-badge-bg-hover:var(--uui-neutral-40);
   --uui-badge-border:var(--uui-neutral-30);
   --uui-badge-border-hover:var(--uui-neutral-40);
-  --uui-badge-caption:var(--uui-neutral-80);
-  --uui-badge-caption-hover:var(--uui-neutral-80);
+  --uui-color-contrast:var(--uui-neutral-80);
 }
 .uui-theme-promo .uui-badge.uui-color-neutral.uui-fill-outline,
 .uui-theme-promo .uui-badge.uui-color-gray30.uui-fill-outline{
   --uui-badge-bg:var(--uui-neutral-20);
-  --uui-badge-bg-hover:var(--uui-neutral-30);
   --uui-badge-border:var(--uui-neutral-40);
+  --uui-badge-bg-hover:var(--uui-neutral-30);
   --uui-badge-caption:var(--uui-neutral-80);
   --uui-badge-caption-hover:var(--uui-neutral-80);
 }
-.uui-theme-promo .uui-badge.uui-color-gray10{
-  --uui-badge-bg:var(--uui-neutral-10);
+.uui-theme-promo .uui-badge.uui-color-gray10.uui-fill-solid{
   --uui-badge-bg-hover:var(--uui-neutral-20);
-  --uui-badge-border:var(--uui-neutral-10);
   --uui-badge-border-hover:var(--uui-neutral-20);
 }
 .uui-theme-promo .uui-badge.uui-color-gray10.uui-fill-outline{
   --uui-badge-border:var(--uui-neutral-30);
+  --uui-badge-border-hover:var(--uui-neutral-30);
   --uui-badge-caption:var(--uui-neutral-80);
   --uui-badge-caption-hover:var(--uui-neutral-80);
 }
 .uui-theme-promo .uui-badge.uui-color-gray60.uui-fill-outline{
-  --uui-badge-bg-hover:var(--uui-neutral-30);
   --uui-badge-border:var(--uui-neutral-60);
   --uui-badge-border-hover:var(--uui-neutral-60);
   --uui-badge-caption:var(--uui-neutral-80);
@@ -487,19 +484,16 @@
   --uui-icon_btn-hover:var(--uui-neutral-60);
   --uui-icon_btn-active:var(--uui-neutral-70);
 }
-.uui-theme-promo .uui-tooltip-container.uui-color-white,
-.uui-theme-promo .uui-tooltip-container.uui-color-neutral{
-  --uui-tooltip-bg:var(--white);
+.uui-theme-promo .uui-tooltip-container.uui-color-white{
+  --uui-tooltip-bg:var(--uui-neutral-0);
   --uui-tooltip-text:var(--uui-neutral-80);
 }
-.uui-theme-promo .uui-tooltip-container.uui-color-red,
-.uui-theme-promo .uui-tooltip-container.uui-color-critical{
+.uui-theme-promo .uui-tooltip-container.uui-color-red{
   --uui-tooltip-bg:var(--uui-critical-60);
 }
-.uui-theme-promo .uui-tooltip-container.uui-color-gray,
-.uui-theme-promo .uui-tooltip-container.uui-color-inverted{
+.uui-theme-promo .uui-tooltip-container.uui-color-gray{
   --uui-tooltip-bg:var(--uui-neutral-80);
-  --uui-tooltip-text:var(--white);
+  --uui-tooltip-text:var(--uui-neutral-5);
 }
 .uui-theme-promo .uui-count_indicator.uui-color-gray,
 .uui-theme-promo .uui-count_indicator.uui-color-neutral{
@@ -528,6 +522,9 @@
 .uui-theme-promo .uui-panel.uui-color-gray90{
   --uui-panel-bg:var(--gray90);
 }
+.uui-theme-promo .uui-tag{
+  --uui-border-radius:3px;
+}
 .uui-theme-promo .uui-tag.uui-color-white.uui-fill-solid{
   --uui-tag-bg-hover:var(--uui-neutral-10);
   --uui-tag-border-hover:var(--uui-neutral-10);
@@ -577,6 +574,7 @@
 .uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-solid .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-solid .uui-count_indicator{
   --uui-count_indicator-bg:var(--uui-neutral-0);
   --uui-count_indicator-border:var(--uui-neutral-0);
+  --uui-count_indicator-caption:var(--uui-neutral-70);
 }
 .uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-outline, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-outline{
   --uui-tag-bg:var(--uui-neutral-20);

package/css/theme/theme_promo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../theme/theme_promo.scss%23sass","../../../../../theme/theme_promo.scss","../../../theme/theme_promo.scss"],"names":[],"mappings":"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","file":"theme_promo.css","sourcesContent":["/*  Name convention  */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n\n@mixin theme-promo {\n    --uui-font: 'Source Sans Pro', sans-serif;\n    --uui-font-mono: 'Roboto Mono', monospace;\n\n    // theme specific fonts\n    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;\n    --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;\n\n    --gray5: #FAFAFC;\n    --gray10: #F5F6FA;\n    --gray20: #EBEDF5;\n    --gray30: #E1E3EB;\n    --gray40: #CED0DB;\n    --gray50: #ACAFBF;\n    --gray60: #6C6F80;\n    --gray70: #474A59;\n    --gray80: #303240;\n    --gray90: #1D1E26;\n\n    --blue-5: #F5FDFF;\n    --blue-10: #D6F2FF;\n    --blue-20: #99DDFF;\n    --blue-50: #007BBD;\n    --blue-60: #006AA3;\n    --blue-70: #005685;\n\n    --green-5: #FCFFF5;\n    --green-10: #EEFFCC;\n    --green-20: #CFF486;\n    --green-50: #65A300;\n    --green-60: #528500;\n    --green-70: #446600;\n\n    --amber-5: #FFFCF5;\n    --amber-10: #FFF2CC;\n    --amber-20: #FFE38F;\n    --amber-50: #FFC000;\n    --amber-60: #DB9D00;\n    --amber-70: #9F6B04;\n\n    --red-5: #FEF7F6;\n    --red-10: #FADED9;\n    --red-20: #F5B5A8;\n    --red-50: #DB3A1A;\n    --red-60: #C03316;\n    --red-70: #A02B13;\n\n    --white: #FFFFFF;\n\n    --yellow-5: #FFFFF0;\n    --yellow-10: #FFFECC;\n    --yellow-20: #FFFCA4;\n    --yellow-50: #FDD63B;\n    --yellow-60: #F9B71D;\n    --yellow-70: #D3910C;\n\n    --orange-5: #FEF8F4;\n    --orange-10: #FFE8D7;\n    --orange-20: #FFCCA7;\n    --orange-50: #FF8B3E;\n    --orange-60: #F76B0D;\n    --orange-70: #BD4B00;\n\n    --fuchsia-5: #FFF7FB;\n    --fuchsia-10: #F9D8E7;\n    --fuchsia-20: #EDADC8;\n    --fuchsia-50: #EA4386;\n    --fuchsia-60: #D61E68;\n    --fuchsia-70: #AE1955;\n\n    --purple-5: #FDF6FE;\n    --purple-10: #F2CCFA;\n    --purple-20: #E79DF5;\n    --purple-50: #B114D1;\n    --purple-60: #860F9E;\n    --purple-70: #5E0B6F;\n\n    --violet-5: #F8F6FE;\n    --violet-10: #DBCCFA;\n    --violet-20: #BB9DF5;\n    --violet-50: #773CEC;\n    --violet-60: #5514D6;\n    --violet-70: #40109E;\n\n    --cobalt-5: #F8FAFF;\n    --cobalt-10: #D9E2FC;\n    --cobalt-20: #AEC0F5;\n    --cobalt-50: #0F98FF;\n    --cobalt-60: #006FE5;\n    --cobalt-70: #0954A5;\n\n    --cyan-5: #F5FBFF;\n    --cyan-10: #D1FAFA;\n    --cyan-20: #AAEEEE;\n    --cyan-50: #14CCCC;\n    --cyan-60: #0F9E9E;\n    --cyan-70: #0B6F6F;\n\n    --mint-5: #F2FCF5;\n    --mint-10: #DDF3E4;\n    --mint-20: #B4DFC4;\n    --mint-50: #4FC48C;\n    --mint-60: #2E9E68;\n    --mint-70: #236E4A;\n\n    /* core variables start */\n\n    /* brand colors */\n\n    --uui-accent-5: var(--green-5);\n    --uui-accent-10: var(--green-10);\n    --uui-accent-20: var(--green-20);\n    --uui-accent-50: var(--green-50);\n    --uui-accent-60: var(--green-60);\n    --uui-accent-70: var(--green-70);\n    --uui-accent-contrast: var(--white);\n\n    --uui-primary-5: var(--blue-5);\n    --uui-primary-10: var(--blue-10);\n    --uui-primary-20: var(--blue-20);\n    --uui-primary-50: var(--blue-50);\n    --uui-primary-60: var(--blue-60);\n    --uui-primary-70: var(--blue-70);\n    --uui-primary-contrast: var(--white);\n\n    --uui-secondary-5: var(--gray10);\n    --uui-secondary-10: var(--gray20);\n    --uui-secondary-20: var(--gray30);\n    --uui-secondary-50: var(--gray60);\n    --uui-secondary-60: var(--gray70);\n    --uui-secondary-70: var(--gray80);\n    --uui-secondary-contrast: var(--white);\n\n    --uui-critical-5: var(--red-5);\n    --uui-critical-10: var(--red-10);\n    --uui-critical-20: var(--red-20);\n    --uui-critical-50: var(--red-50);\n    --uui-critical-60: var(--red-60);\n    --uui-critical-70: var(--red-70);\n    --uui-critical-contrast: var(--white);\n\n    /* semantic colors */\n\n    --uui-info-5: var(--blue-5);\n    --uui-info-10: var(--blue-10);\n    --uui-info-20: var(--blue-20);\n    --uui-info-50: var(--blue-50);\n    --uui-info-60: var(--blue-60);\n    --uui-info-70: var(--blue-70);\n    --uui-info-contrast: var(--white);\n\n    --uui-success-5: var(--green-5);\n    --uui-success-10: var(--green-10);\n    --uui-success-20: var(--green-20);\n    --uui-success-50: var(--green-50);\n    --uui-success-60: var(--green-60);\n    --uui-success-70: var(--green-70);\n    --uui-success-contrast: var(--white);\n\n    --uui-warning-5: var(--amber-5);\n    --uui-warning-10: var(--amber-10);\n    --uui-warning-20: var(--amber-20);\n    --uui-warning-50: var(--amber-50);\n    --uui-warning-60: var(--amber-60);\n    --uui-warning-70: var(--amber-70);\n    --uui-warning-contrast: var(--gray80);\n\n    --uui-error-5: var(--red-5);\n    --uui-error-10: var(--red-10);\n    --uui-error-20: var(--red-20);\n    --uui-error-50: var(--red-50);\n    --uui-error-60: var(--red-60);\n    --uui-error-70: var(--red-70);\n    --uui-error-contrast: var(--white);\n\n    --uui-neutral-0: #FFFFFF;\n    --uui-neutral-5: var(--gray5);\n    --uui-neutral-10: var(--gray10);\n    --uui-neutral-20: var(--gray20);\n    --uui-neutral-30: var(--gray30);\n    --uui-neutral-40: var(--gray40);\n    --uui-neutral-50: var(--gray50);\n    --uui-neutral-60: var(--gray60);\n    --uui-neutral-70: var(--gray70);\n    --uui-neutral-80: var(--gray80);\n    --uui-neutral-90: var(--gray90);\n    --uui-neutral-100: #000000;\n\n    /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */\n\n    --uui-app-bg: var(--uui-neutral-10);\n    --uui-overlay: rgba(29, 30, 38, 0.8);\n\n    --uui-surface-sunken: var(--uui-neutral-5);\n    --uui-surface-main: var(--uui-neutral-0);\n    --uui-surface-higher: var(--uui-neutral-10);\n    --uui-surface-highest: var(--uui-neutral-20);\n\n    --uui-divider: var(--uui-neutral-40);\n    --uui-divider-light: var(--uui-neutral-30);\n\n    --uui-text-brand: var(--uui-neutral-90);\n    --uui-text-primary: var(--uui-neutral-80);\n    --uui-text-secondary: var(--uui-neutral-70);\n    --uui-text-tertiary: var(--uui-neutral-60);\n    --uui-text-disabled: var(--uui-neutral-50);\n\n    --uui-text-info: var(--uui-info-70);\n    --uui-text-warning: var(--uui-warning-70);\n    --uui-text-critical: var(--uui-critical-70);\n    --uui-text-success: var(--uui-success-70);\n\n    /* not accepted part */\n\n    /* control specific */\n\n    --uui-link: var(--blue-50);\n    --uui-link-soft: var(--blue-5);\n    --uui-link-hover: var(--blue-60);\n    --uui-link-visited: #8018A0;\n    --uui-link-visited-hover: #601278;\n    --uui-link-disabled: var(--uui-neutral-50);\n\n    --uui-icon: var(--uui-neutral-60);\n    --uui-icon-hover: var(--uui-neutral-70);\n    --uui-icon-active: var(--uui-neutral-80);\n    --uui-icon-disabled: var(--uui-neutral-50);\n\n    --uui-control-bg: var(--uui-neutral-0);\n    --uui-control-bg-hover: var(--uui-neutral-60);\n    --uui-control-bg-disabled: var(--uui-neutral-5);\n\n    --uui-control-border: var(--uui-neutral-40);\n    --uui-control-border-hover: var(--uui-neutral-60);\n    --uui-control-border-focus: var(--uui-primary-50);\n    --uui-control-border-disabled: var(--uui-neutral-30);\n\n    --uui-control-placeholder: var(--uui-neutral-50);\n    --uui-control-placeholder-disabled: var(--uui-neutral-50);\n\n    --uui-control-text: var(--uui-text-primary);\n    --uui-control-text-disabled: var(--uui-text-tertiary);\n\n    --uui-control-icon: var(--uui-neutral-50);\n    --uui-control-icon-disabled: var(--uui-neutral-50);\n\n    --uui-outline-focus: #008ACE80;\n\n    --uui-skeleton: var(--uui-neutral-40);\n\n    --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);\n    --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n    --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);\n\n    --uui-border-radius: 0;\n\n    /* core variables end */\n\n    /* ------------------------------------ */\n\n    /* begin color classes */\n\n    .uui-color-accent,\n    .uui-color-green {\n        --uui-color-5: var(--uui-accent-5);\n        --uui-color-10: var(--uui-accent-10);\n        --uui-color-20: var(--uui-accent-20);\n        --uui-color-50: var(--uui-accent-50);\n        --uui-color-60: var(--uui-accent-60);\n        --uui-color-70: var(--uui-accent-70);\n        --uui-color-contrast: var(--uui-accent-contrast);\n    }\n\n    .uui-color-primary,\n    .uui-color-blue {\n        --uui-color-5: var(--uui-primary-5);\n        --uui-color-10: var(--uui-primary-10);\n        --uui-color-20: var(--uui-primary-20);\n        --uui-color-50: var(--uui-primary-50);\n        --uui-color-60: var(--uui-primary-60);\n        --uui-color-70: var(--uui-primary-70);\n        --uui-color-contrast: var(--uui-primary-contrast);\n    }\n\n    .uui-color-secondary,\n    .uui-color-neutral,\n    .uui-color-gray {\n        --uui-color-5: var(--uui-secondary-5);\n        --uui-color-10: var(--uui-secondary-10);\n        --uui-color-20: var(--uui-secondary-20);\n        --uui-color-50: var(--uui-secondary-50);\n        --uui-color-60: var(--uui-secondary-60);\n        --uui-color-70: var(--uui-secondary-70);\n        --uui-color-contrast: var(--uui-secondary-contrast);\n    }\n\n    .uui-color-critical,\n    .uui-color-red {\n        --uui-color-5: var(--uui-critical-5);\n        --uui-color-10: var(--uui-critical-10);\n        --uui-color-20: var(--uui-critical-20);\n        --uui-color-50: var(--uui-critical-50);\n        --uui-color-60: var(--uui-critical-60);\n        --uui-color-70: var(--uui-critical-70);\n        --uui-color-contrast: var(--uui-critical-contrast);\n    }\n\n    .uui-color-info {\n        --uui-color-5: var(--uui-info-5);\n        --uui-color-10: var(--uui-info-10);\n        --uui-color-20: var(--uui-info-20);\n        --uui-color-50: var(--uui-info-50);\n        --uui-color-60: var(--uui-info-60);\n        --uui-color-70: var(--uui-info-70);\n        --uui-color-contrast: var(--uui-info-contrast);\n    }\n\n    .uui-color-success {\n        --uui-color-5: var(--uui-success-5);\n        --uui-color-10: var(--uui-success-10);\n        --uui-color-20: var(--uui-success-20);\n        --uui-color-50: var(--uui-success-50);\n        --uui-color-60: var(--uui-success-60);\n        --uui-color-70: var(--uui-success-70);\n        --uui-color-contrast: var(--uui-success-contrast);\n    }\n\n    .uui-color-warning,\n    .uui-color-amber {\n        --uui-color-5: var(--uui-warning-5);\n        --uui-color-10: var(--uui-warning-10);\n        --uui-color-20: var(--uui-warning-20);\n        --uui-color-50: var(--uui-warning-50);\n        --uui-color-60: var(--uui-warning-60);\n        --uui-color-70: var(--uui-warning-70);\n        --uui-color-contrast: var(--uui-warning-contrast);\n    }\n\n    .uui-color-error {\n        --uui-color-5: var(--uui-error-5);\n        --uui-color-10: var(--uui-error-10);\n        --uui-color-20: var(--uui-error-20);\n        --uui-color-50: var(--uui-error-50);\n        --uui-color-60: var(--uui-error-60);\n        --uui-color-70: var(--uui-error-70);\n        --uui-color-contrast: var(--uui-error-contrast);\n    }\n\n    .uui-color-white {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--white);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray5 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--gray5);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-link_button.uui-color-contrast,\n    .uui-color-gray10 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--gray5);\n        --uui-color-50: var(--gray10);\n        --uui-color-60: var(--gray20);\n        --uui-color-70: var(--gray30);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray30 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray30);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray30);\n        --uui-color-60: var(--gray40);\n        --uui-color-70: var(--gray50);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray50 {\n        --uui-color-5: var(--gray5);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray50);\n        --uui-color-60: var(--gray60);\n        --uui-color-70: var(--gray70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-button.uui-color-gray50,\n    .uui-color-gray60 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray60);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray60);\n        --uui-color-60: var(--gray70);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray80 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray80);\n        --uui-color-60: var(--gray80);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray90 {\n        --uui-color-5: var(--gray60);\n        --uui-color-10: var(--gray70);\n        --uui-color-20: var(--gray80);\n        --uui-color-50: var(--gray90);\n        --uui-color-60: var(--gray90);\n        --uui-color-70: var(--gray90);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-yellow {\n        --uui-color-5: var(--yellow-5);\n        --uui-color-10: var(--yellow-10);\n        --uui-color-20: var(--yellow-20);\n        --uui-color-50: var(--yellow-50);\n        --uui-color-60: var(--yellow-60);\n        --uui-color-70: var(--yellow-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-orange {\n        --uui-color-5: var(--orange-5);\n        --uui-color-10: var(--orange-10);\n        --uui-color-20: var(--orange-20);\n        --uui-color-50: var(--orange-50);\n        --uui-color-60: var(--orange-60);\n        --uui-color-70: var(--orange-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-fuchsia {\n        --uui-color-5: var(--fuchsia-5);\n        --uui-color-10: var(--fuchsia-10);\n        --uui-color-20: var(--fuchsia-20);\n        --uui-color-50: var(--fuchsia-50);\n        --uui-color-60: var(--fuchsia-60);\n        --uui-color-70: var(--fuchsia-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-purple {\n        --uui-color-5: var(--purple-5);\n        --uui-color-10: var(--purple-10);\n        --uui-color-20: var(--purple-20);\n        --uui-color-50: var(--purple-50);\n        --uui-color-60: var(--purple-60);\n        --uui-color-70: var(--purple-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-violet {\n        --uui-color-5: var(--violet-5);\n        --uui-color-10: var(--violet-10);\n        --uui-color-20: var(--violet-20);\n        --uui-color-50: var(--violet-50);\n        --uui-color-60: var(--violet-60);\n        --uui-color-70: var(--violet-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cobalt {\n        --uui-color-5: var(--cobalt-5);\n        --uui-color-10: var(--cobalt-10);\n        --uui-color-20: var(--cobalt-20);\n        --uui-color-50: var(--cobalt-50);\n        --uui-color-60: var(--cobalt-60);\n        --uui-color-70: var(--cobalt-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cyan {\n        --uui-color-5: var(--cyan-5);\n        --uui-color-10: var(--cyan-10);\n        --uui-color-20: var(--cyan-20);\n        --uui-color-50: var(--cyan-50);\n        --uui-color-60: var(--cyan-60);\n        --uui-color-70: var(--cyan-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-mint {\n        --uui-color-5: var(--mint-5);\n        --uui-color-10: var(--mint-10);\n        --uui-color-20: var(--mint-20);\n        --uui-color-50: var(--mint-50);\n        --uui-color-60: var(--mint-60);\n        --uui-color-70: var(--mint-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    /* Badge */\n\n    .uui-badge.uui-color-white.uui-fill-outline {\n        --uui-badge-bg-hover: var(--uui-neutral-10);\n        --uui-badge-border: var(--uui-neutral-30);\n        --uui-badge-border-hover: var(--uui-neutral-30);\n        --uui-badge-caption: var(--uui-neutral-80);\n        --uui-badge-caption-hover: var(--uui-neutral-80);\n    }\n\n    .uui-badge.uui-color-neutral,\n    .uui-badge.uui-color-gray30 {\n        --uui-badge-bg: var(--uui-neutral-30);\n        --uui-badge-bg-hover: var(--uui-neutral-40);\n        --uui-badge-border: var(--uui-neutral-30);\n        --uui-badge-border-hover: var(--uui-neutral-40);\n        --uui-badge-caption: var(--uui-neutral-80);\n        --uui-badge-caption-hover: var(--uui-neutral-80);\n\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-20);\n            --uui-badge-bg-hover: var(--uui-neutral-30);\n            --uui-badge-border: var(--uui-neutral-40);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray10 {\n        --uui-badge-bg: var(--uui-neutral-10);\n        --uui-badge-bg-hover: var(--uui-neutral-20);\n        --uui-badge-border: var(--uui-neutral-10);\n        --uui-badge-border-hover: var(--uui-neutral-20);\n\n        &.uui-fill-outline {\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray60.uui-fill-outline {\n        --uui-badge-bg-hover: var(--uui-neutral-30);\n        --uui-badge-border: var(--uui-neutral-60);\n        --uui-badge-border-hover: var(--uui-neutral-60);\n        --uui-badge-caption: var(--uui-neutral-80);\n        --uui-badge-caption-hover: var(--uui-neutral-80);\n    }\n\n    .uui-badge.uui-color-yellow.uui-fill-outline {\n        --uui-badge-border: var(--yellow-20);\n    }\n\n    /* Button */\n\n    .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n        --uui-btn-caption: var(--uui-neutral-70);\n    }\n\n    .uui-button {\n        &.uui-size-42, &.uui-size-48 {\n            .uui-caption {\n                font-family: var(--font-museo-sans);\n            }\n        }\n    }\n\n    /* IconButton */\n\n    .uui-icon_button.uui-color-neutral,\n    .uui-icon_button.uui-color-gray60 {\n        --uui-icon_btn: var(--uui-neutral-60);\n        --uui-icon_btn-hover: var(--uui-neutral-70);\n        --uui-icon_btn-active: var(--uui-neutral-80);\n    }\n\n    .uui-icon_button.uui-color-secondary {\n        --uui-icon_btn: var(--uui-neutral-50);\n        --uui-icon_btn-hover: var(--uui-neutral-60);\n        --uui-icon_btn-active: var(--uui-neutral-70);\n    }\n\n    /* TooltipContainer */\n\n    .uui-tooltip-container.uui-color-white,\n    .uui-tooltip-container.uui-color-neutral {\n        --uui-tooltip-bg: var(--white);\n        --uui-tooltip-text: var(--uui-neutral-80);\n    }\n\n    .uui-tooltip-container.uui-color-red,\n    .uui-tooltip-container.uui-color-critical {\n        --uui-tooltip-bg: var(--uui-critical-60);\n    }\n\n    .uui-tooltip-container.uui-color-gray,\n    .uui-tooltip-container.uui-color-inverted {\n        --uui-tooltip-bg: var(--uui-neutral-80);\n        --uui-tooltip-text: var(--white);\n    }\n\n    /* CountIndicator */\n\n    .uui-count_indicator.uui-color-gray,\n    .uui-count_indicator.uui-color-neutral {\n        --uui-count_indicator-bg: var(--uui-neutral-30);\n        --uui-count_indicator-border: var(--uui-neutral-30);\n    }\n\n    .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n        --uui-count_indicator-caption: var(--uui-neutral-70);\n    }\n\n    /* Status Indicator */\n\n    .uui-status_indicator.uui-color-white.uui-fill-outline {\n        .uui-status_indicator_dot {\n            background-color: color-mix(in srgb, var(--white) 20%, transparent);\n            border: 1px solid var(--uui-neutral-40);\n        }\n    }\n\n    /* FlexRow */\n\n    .uui-flex-row.uui-color-none {\n        --uui-flex-row-bg: transparent;\n    }\n\n    .uui-flex-row.uui-color-white {\n        --uui-flex-row-bg: var(--white);\n    }\n\n    .uui-flex-row.uui-color-gray5 {\n        --uui-flex-row-bg: var(--gray5);\n    }\n\n    .uui-panel.uui-color-white {\n        --uui-panel-bg: var(--white);\n    }\n\n    .uui-panel.uui-color-gray90 {\n        --uui-panel-bg: var(--gray90);\n    }\n\n    /* Tag */\n\n    .uui-tag {\n        &.uui-color-white {\n            &.uui-fill-solid {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border-hover: var(--uui-neutral-10);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray10 {\n            &.uui-fill-solid {\n                --uui-tag-border-hover: var(--uui-neutral-20);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-5);\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-neutral,\n        &.uui-color-gray30 {\n            &.uui-fill-solid {\n                --uui-tag-bg: var(--uui-neutral-30);\n                --uui-tag-bg-hover: var(--uui-neutral-40);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-0);\n                    --uui-count_indicator-border: var(--uui-neutral-0);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-40);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray70 {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-neutral-0);\n                --uui-tag-fill: var(--uui-neutral-0);\n                --uui-tag-bg: var(--uui-neutral-70);\n                --uui-tag-border: var(--uui-neutral-70);\n                --uui-tag-bg-hover: var(--uui-neutral-80);\n                --uui-tag-border-hover: var(--uui-neutral-80);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n                    --uui-count_indicator-caption: var(--uui-neutral-0);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-50);\n                --uui-tag-border-hover: var(--uui-neutral-50);\n\n            }\n        }\n\n        &.uui-color-warning,\n        &.uui-color-amber {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-90);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n                }\n            }\n\n            &.uui-fill-outline .uui-count_indicator {\n                --uui-count_indicator-bg: var(--uui-neutral-0);\n                --uui-count_indicator-border: var(--uui-neutral-40);\n            }\n        }\n    }\n\n    .uui-dropdown-body {\n        --uui-dropdown_container-border-radius: 0;\n    }\n\n    .uui-link_button {\n        &.uui-size-42, &.uui-size-48 {\n            :global(.uui-caption) {\n                font-family: var(--font-museo-sans);\n                text-transform: uppercase;\n            }\n        }\n    }\n\n    /* fonts */\n\n    .uui-font-sans {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n    }\n\n    .uui-font-sans-semibold {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 600;\n    }\n\n    .uui-font-sans-italic {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n        --uui-text-font-style: italic;\n    }\n\n    .uui-font-museo-sans {\n        --uui-text-font: var(--font-museo-sans);\n        --uui-text-font-weight: normal;\n    }\n\n    .uui-font-museo-slab {\n        --uui-text-font: var(--font-museo-slab);\n        --uui-text-font-weight: normal;\n    }\n\n    /* Typography */\n\n    .uui-typography {\n        h1, h2, h3 {\n            font-family: var(--font-museo-sans);\n        }\n\n        h1 {\n            font-size: 36px;\n        }\n\n        .hero-header {\n            font-family: var(--font-museo-slab);\n        }\n\n        .promo-header:is(h1, h2, h3) {\n            font-family: var(--font-museo-sans);\n        }\n    }\n}\n\n.uui-theme-promo {\n    @include theme-promo();\n}\n\n","/*  Name convention  */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n\n@mixin theme-promo {\n    --uui-font: 'Source Sans Pro', sans-serif;\n    --uui-font-mono: 'Roboto Mono', monospace;\n\n    // theme specific fonts\n    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;\n    --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;\n\n    --gray5: #FAFAFC;\n    --gray10: #F5F6FA;\n    --gray20: #EBEDF5;\n    --gray30: #E1E3EB;\n    --gray40: #CED0DB;\n    --gray50: #ACAFBF;\n    --gray60: #6C6F80;\n    --gray70: #474A59;\n    --gray80: #303240;\n    --gray90: #1D1E26;\n\n    --blue-5: #F5FDFF;\n    --blue-10: #D6F2FF;\n    --blue-20: #99DDFF;\n    --blue-50: #007BBD;\n    --blue-60: #006AA3;\n    --blue-70: #005685;\n\n    --green-5: #FCFFF5;\n    --green-10: #EEFFCC;\n    --green-20: #CFF486;\n    --green-50: #65A300;\n    --green-60: #528500;\n    --green-70: #446600;\n\n    --amber-5: #FFFCF5;\n    --amber-10: #FFF2CC;\n    --amber-20: #FFE38F;\n    --amber-50: #FFC000;\n    --amber-60: #DB9D00;\n    --amber-70: #9F6B04;\n\n    --red-5: #FEF7F6;\n    --red-10: #FADED9;\n    --red-20: #F5B5A8;\n    --red-50: #DB3A1A;\n    --red-60: #C03316;\n    --red-70: #A02B13;\n\n    --white: #FFFFFF;\n\n    --yellow-5: #FFFFF0;\n    --yellow-10: #FFFECC;\n    --yellow-20: #FFFCA4;\n    --yellow-50: #FDD63B;\n    --yellow-60: #F9B71D;\n    --yellow-70: #D3910C;\n\n    --orange-5: #FEF8F4;\n    --orange-10: #FFE8D7;\n    --orange-20: #FFCCA7;\n    --orange-50: #FF8B3E;\n    --orange-60: #F76B0D;\n    --orange-70: #BD4B00;\n\n    --fuchsia-5: #FFF7FB;\n    --fuchsia-10: #F9D8E7;\n    --fuchsia-20: #EDADC8;\n    --fuchsia-50: #EA4386;\n    --fuchsia-60: #D61E68;\n    --fuchsia-70: #AE1955;\n\n    --purple-5: #FDF6FE;\n    --purple-10: #F2CCFA;\n    --purple-20: #E79DF5;\n    --purple-50: #B114D1;\n    --purple-60: #860F9E;\n    --purple-70: #5E0B6F;\n\n    --violet-5: #F8F6FE;\n    --violet-10: #DBCCFA;\n    --violet-20: #BB9DF5;\n    --violet-50: #773CEC;\n    --violet-60: #5514D6;\n    --violet-70: #40109E;\n\n    --cobalt-5: #F8FAFF;\n    --cobalt-10: #D9E2FC;\n    --cobalt-20: #AEC0F5;\n    --cobalt-50: #0F98FF;\n    --cobalt-60: #006FE5;\n    --cobalt-70: #0954A5;\n\n    --cyan-5: #F5FBFF;\n    --cyan-10: #D1FAFA;\n    --cyan-20: #AAEEEE;\n    --cyan-50: #14CCCC;\n    --cyan-60: #0F9E9E;\n    --cyan-70: #0B6F6F;\n\n    --mint-5: #F2FCF5;\n    --mint-10: #DDF3E4;\n    --mint-20: #B4DFC4;\n    --mint-50: #4FC48C;\n    --mint-60: #2E9E68;\n    --mint-70: #236E4A;\n\n    /* core variables start */\n\n    /* brand colors */\n\n    --uui-accent-5: var(--green-5);\n    --uui-accent-10: var(--green-10);\n    --uui-accent-20: var(--green-20);\n    --uui-accent-50: var(--green-50);\n    --uui-accent-60: var(--green-60);\n    --uui-accent-70: var(--green-70);\n    --uui-accent-contrast: var(--white);\n\n    --uui-primary-5: var(--blue-5);\n    --uui-primary-10: var(--blue-10);\n    --uui-primary-20: var(--blue-20);\n    --uui-primary-50: var(--blue-50);\n    --uui-primary-60: var(--blue-60);\n    --uui-primary-70: var(--blue-70);\n    --uui-primary-contrast: var(--white);\n\n    --uui-secondary-5: var(--gray10);\n    --uui-secondary-10: var(--gray20);\n    --uui-secondary-20: var(--gray30);\n    --uui-secondary-50: var(--gray60);\n    --uui-secondary-60: var(--gray70);\n    --uui-secondary-70: var(--gray80);\n    --uui-secondary-contrast: var(--white);\n\n    --uui-critical-5: var(--red-5);\n    --uui-critical-10: var(--red-10);\n    --uui-critical-20: var(--red-20);\n    --uui-critical-50: var(--red-50);\n    --uui-critical-60: var(--red-60);\n    --uui-critical-70: var(--red-70);\n    --uui-critical-contrast: var(--white);\n\n    /* semantic colors */\n\n    --uui-info-5: var(--blue-5);\n    --uui-info-10: var(--blue-10);\n    --uui-info-20: var(--blue-20);\n    --uui-info-50: var(--blue-50);\n    --uui-info-60: var(--blue-60);\n    --uui-info-70: var(--blue-70);\n    --uui-info-contrast: var(--white);\n\n    --uui-success-5: var(--green-5);\n    --uui-success-10: var(--green-10);\n    --uui-success-20: var(--green-20);\n    --uui-success-50: var(--green-50);\n    --uui-success-60: var(--green-60);\n    --uui-success-70: var(--green-70);\n    --uui-success-contrast: var(--white);\n\n    --uui-warning-5: var(--amber-5);\n    --uui-warning-10: var(--amber-10);\n    --uui-warning-20: var(--amber-20);\n    --uui-warning-50: var(--amber-50);\n    --uui-warning-60: var(--amber-60);\n    --uui-warning-70: var(--amber-70);\n    --uui-warning-contrast: var(--gray80);\n\n    --uui-error-5: var(--red-5);\n    --uui-error-10: var(--red-10);\n    --uui-error-20: var(--red-20);\n    --uui-error-50: var(--red-50);\n    --uui-error-60: var(--red-60);\n    --uui-error-70: var(--red-70);\n    --uui-error-contrast: var(--white);\n\n    --uui-neutral-0: #FFFFFF;\n    --uui-neutral-5: var(--gray5);\n    --uui-neutral-10: var(--gray10);\n    --uui-neutral-20: var(--gray20);\n    --uui-neutral-30: var(--gray30);\n    --uui-neutral-40: var(--gray40);\n    --uui-neutral-50: var(--gray50);\n    --uui-neutral-60: var(--gray60);\n    --uui-neutral-70: var(--gray70);\n    --uui-neutral-80: var(--gray80);\n    --uui-neutral-90: var(--gray90);\n    --uui-neutral-100: #000000;\n\n    /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */\n\n    --uui-app-bg: var(--uui-neutral-10);\n    --uui-overlay: rgba(29, 30, 38, 0.8);\n\n    --uui-surface-sunken: var(--uui-neutral-5);\n    --uui-surface-main: var(--uui-neutral-0);\n    --uui-surface-higher: var(--uui-neutral-10);\n    --uui-surface-highest: var(--uui-neutral-20);\n\n    --uui-divider: var(--uui-neutral-40);\n    --uui-divider-light: var(--uui-neutral-30);\n\n    --uui-text-brand: var(--uui-neutral-90);\n    --uui-text-primary: var(--uui-neutral-80);\n    --uui-text-secondary: var(--uui-neutral-70);\n    --uui-text-tertiary: var(--uui-neutral-60);\n    --uui-text-disabled: var(--uui-neutral-50);\n\n    --uui-text-info: var(--uui-info-70);\n    --uui-text-warning: var(--uui-warning-70);\n    --uui-text-critical: var(--uui-critical-70);\n    --uui-text-success: var(--uui-success-70);\n\n    /* not accepted part */\n\n    /* control specific */\n\n    --uui-link: var(--blue-50);\n    --uui-link-soft: var(--blue-5);\n    --uui-link-hover: var(--blue-60);\n    --uui-link-visited: #8018A0;\n    --uui-link-visited-hover: #601278;\n    --uui-link-disabled: var(--uui-neutral-50);\n\n    --uui-icon: var(--uui-neutral-60);\n    --uui-icon-hover: var(--uui-neutral-70);\n    --uui-icon-active: var(--uui-neutral-80);\n    --uui-icon-disabled: var(--uui-neutral-50);\n\n    --uui-control-bg: var(--uui-neutral-0);\n    --uui-control-bg-hover: var(--uui-neutral-60);\n    --uui-control-bg-disabled: var(--uui-neutral-5);\n\n    --uui-control-border: var(--uui-neutral-40);\n    --uui-control-border-hover: var(--uui-neutral-60);\n    --uui-control-border-focus: var(--uui-primary-50);\n    --uui-control-border-disabled: var(--uui-neutral-30);\n\n    --uui-control-placeholder: var(--uui-neutral-50);\n    --uui-control-placeholder-disabled: var(--uui-neutral-50);\n\n    --uui-control-text: var(--uui-text-primary);\n    --uui-control-text-disabled: var(--uui-text-tertiary);\n\n    --uui-control-icon: var(--uui-neutral-50);\n    --uui-control-icon-disabled: var(--uui-neutral-50);\n\n    --uui-outline-focus: #008ACE80;\n\n    --uui-skeleton: var(--uui-neutral-40);\n\n    --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);\n    --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n    --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);\n\n    --uui-border-radius: 0;\n\n    /* core variables end */\n\n    /* ------------------------------------ */\n\n    /* begin color classes */\n\n    .uui-color-accent,\n    .uui-color-green {\n        --uui-color-5: var(--uui-accent-5);\n        --uui-color-10: var(--uui-accent-10);\n        --uui-color-20: var(--uui-accent-20);\n        --uui-color-50: var(--uui-accent-50);\n        --uui-color-60: var(--uui-accent-60);\n        --uui-color-70: var(--uui-accent-70);\n        --uui-color-contrast: var(--uui-accent-contrast);\n    }\n\n    .uui-color-primary,\n    .uui-color-blue {\n        --uui-color-5: var(--uui-primary-5);\n        --uui-color-10: var(--uui-primary-10);\n        --uui-color-20: var(--uui-primary-20);\n        --uui-color-50: var(--uui-primary-50);\n        --uui-color-60: var(--uui-primary-60);\n        --uui-color-70: var(--uui-primary-70);\n        --uui-color-contrast: var(--uui-primary-contrast);\n    }\n\n    .uui-color-secondary,\n    .uui-color-neutral,\n    .uui-color-gray {\n        --uui-color-5: var(--uui-secondary-5);\n        --uui-color-10: var(--uui-secondary-10);\n        --uui-color-20: var(--uui-secondary-20);\n        --uui-color-50: var(--uui-secondary-50);\n        --uui-color-60: var(--uui-secondary-60);\n        --uui-color-70: var(--uui-secondary-70);\n        --uui-color-contrast: var(--uui-secondary-contrast);\n    }\n\n    .uui-color-critical,\n    .uui-color-red {\n        --uui-color-5: var(--uui-critical-5);\n        --uui-color-10: var(--uui-critical-10);\n        --uui-color-20: var(--uui-critical-20);\n        --uui-color-50: var(--uui-critical-50);\n        --uui-color-60: var(--uui-critical-60);\n        --uui-color-70: var(--uui-critical-70);\n        --uui-color-contrast: var(--uui-critical-contrast);\n    }\n\n    .uui-color-info {\n        --uui-color-5: var(--uui-info-5);\n        --uui-color-10: var(--uui-info-10);\n        --uui-color-20: var(--uui-info-20);\n        --uui-color-50: var(--uui-info-50);\n        --uui-color-60: var(--uui-info-60);\n        --uui-color-70: var(--uui-info-70);\n        --uui-color-contrast: var(--uui-info-contrast);\n    }\n\n    .uui-color-success {\n        --uui-color-5: var(--uui-success-5);\n        --uui-color-10: var(--uui-success-10);\n        --uui-color-20: var(--uui-success-20);\n        --uui-color-50: var(--uui-success-50);\n        --uui-color-60: var(--uui-success-60);\n        --uui-color-70: var(--uui-success-70);\n        --uui-color-contrast: var(--uui-success-contrast);\n    }\n\n    .uui-color-warning,\n    .uui-color-amber {\n        --uui-color-5: var(--uui-warning-5);\n        --uui-color-10: var(--uui-warning-10);\n        --uui-color-20: var(--uui-warning-20);\n        --uui-color-50: var(--uui-warning-50);\n        --uui-color-60: var(--uui-warning-60);\n        --uui-color-70: var(--uui-warning-70);\n        --uui-color-contrast: var(--uui-warning-contrast);\n    }\n\n    .uui-color-error {\n        --uui-color-5: var(--uui-error-5);\n        --uui-color-10: var(--uui-error-10);\n        --uui-color-20: var(--uui-error-20);\n        --uui-color-50: var(--uui-error-50);\n        --uui-color-60: var(--uui-error-60);\n        --uui-color-70: var(--uui-error-70);\n        --uui-color-contrast: var(--uui-error-contrast);\n    }\n\n    .uui-color-white {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--white);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray5 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--gray5);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-link_button.uui-color-contrast,\n    .uui-color-gray10 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--gray5);\n        --uui-color-50: var(--gray10);\n        --uui-color-60: var(--gray20);\n        --uui-color-70: var(--gray30);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray30 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray30);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray30);\n        --uui-color-60: var(--gray40);\n        --uui-color-70: var(--gray50);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray50 {\n        --uui-color-5: var(--gray5);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray50);\n        --uui-color-60: var(--gray60);\n        --uui-color-70: var(--gray70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-button.uui-color-gray50,\n    .uui-color-gray60 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray60);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray60);\n        --uui-color-60: var(--gray70);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray80 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray80);\n        --uui-color-60: var(--gray80);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray90 {\n        --uui-color-5: var(--gray60);\n        --uui-color-10: var(--gray70);\n        --uui-color-20: var(--gray80);\n        --uui-color-50: var(--gray90);\n        --uui-color-60: var(--gray90);\n        --uui-color-70: var(--gray90);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-yellow {\n        --uui-color-5: var(--yellow-5);\n        --uui-color-10: var(--yellow-10);\n        --uui-color-20: var(--yellow-20);\n        --uui-color-50: var(--yellow-50);\n        --uui-color-60: var(--yellow-60);\n        --uui-color-70: var(--yellow-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-orange {\n        --uui-color-5: var(--orange-5);\n        --uui-color-10: var(--orange-10);\n        --uui-color-20: var(--orange-20);\n        --uui-color-50: var(--orange-50);\n        --uui-color-60: var(--orange-60);\n        --uui-color-70: var(--orange-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-fuchsia {\n        --uui-color-5: var(--fuchsia-5);\n        --uui-color-10: var(--fuchsia-10);\n        --uui-color-20: var(--fuchsia-20);\n        --uui-color-50: var(--fuchsia-50);\n        --uui-color-60: var(--fuchsia-60);\n        --uui-color-70: var(--fuchsia-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-purple {\n        --uui-color-5: var(--purple-5);\n        --uui-color-10: var(--purple-10);\n        --uui-color-20: var(--purple-20);\n        --uui-color-50: var(--purple-50);\n        --uui-color-60: var(--purple-60);\n        --uui-color-70: var(--purple-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-violet {\n        --uui-color-5: var(--violet-5);\n        --uui-color-10: var(--violet-10);\n        --uui-color-20: var(--violet-20);\n        --uui-color-50: var(--violet-50);\n        --uui-color-60: var(--violet-60);\n        --uui-color-70: var(--violet-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cobalt {\n        --uui-color-5: var(--cobalt-5);\n        --uui-color-10: var(--cobalt-10);\n        --uui-color-20: var(--cobalt-20);\n        --uui-color-50: var(--cobalt-50);\n        --uui-color-60: var(--cobalt-60);\n        --uui-color-70: var(--cobalt-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cyan {\n        --uui-color-5: var(--cyan-5);\n        --uui-color-10: var(--cyan-10);\n        --uui-color-20: var(--cyan-20);\n        --uui-color-50: var(--cyan-50);\n        --uui-color-60: var(--cyan-60);\n        --uui-color-70: var(--cyan-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-mint {\n        --uui-color-5: var(--mint-5);\n        --uui-color-10: var(--mint-10);\n        --uui-color-20: var(--mint-20);\n        --uui-color-50: var(--mint-50);\n        --uui-color-60: var(--mint-60);\n        --uui-color-70: var(--mint-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    /* Badge */\n\n    .uui-badge.uui-color-white.uui-fill-outline {\n        --uui-badge-bg-hover: var(--uui-neutral-10);\n        --uui-badge-border: var(--uui-neutral-30);\n        --uui-badge-border-hover: var(--uui-neutral-30);\n        --uui-badge-caption: var(--uui-neutral-80);\n        --uui-badge-caption-hover: var(--uui-neutral-80);\n    }\n\n    .uui-badge.uui-color-neutral,\n    .uui-badge.uui-color-gray30 {\n        --uui-badge-bg: var(--uui-neutral-30);\n        --uui-badge-bg-hover: var(--uui-neutral-40);\n        --uui-badge-border: var(--uui-neutral-30);\n        --uui-badge-border-hover: var(--uui-neutral-40);\n        --uui-badge-caption: var(--uui-neutral-80);\n        --uui-badge-caption-hover: var(--uui-neutral-80);\n\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-20);\n            --uui-badge-bg-hover: var(--uui-neutral-30);\n            --uui-badge-border: var(--uui-neutral-40);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray10 {\n        --uui-badge-bg: var(--uui-neutral-10);\n        --uui-badge-bg-hover: var(--uui-neutral-20);\n        --uui-badge-border: var(--uui-neutral-10);\n        --uui-badge-border-hover: var(--uui-neutral-20);\n\n        &.uui-fill-outline {\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray60.uui-fill-outline {\n        --uui-badge-bg-hover: var(--uui-neutral-30);\n        --uui-badge-border: var(--uui-neutral-60);\n        --uui-badge-border-hover: var(--uui-neutral-60);\n        --uui-badge-caption: var(--uui-neutral-80);\n        --uui-badge-caption-hover: var(--uui-neutral-80);\n    }\n\n    .uui-badge.uui-color-yellow.uui-fill-outline {\n        --uui-badge-border: var(--yellow-20);\n    }\n\n    /* Button */\n\n    .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n        --uui-btn-caption: var(--uui-neutral-70);\n    }\n\n    .uui-button {\n        &.uui-size-42, &.uui-size-48 {\n            .uui-caption {\n                font-family: var(--font-museo-sans);\n            }\n        }\n    }\n\n    /* IconButton */\n\n    .uui-icon_button.uui-color-neutral,\n    .uui-icon_button.uui-color-gray60 {\n        --uui-icon_btn: var(--uui-neutral-60);\n        --uui-icon_btn-hover: var(--uui-neutral-70);\n        --uui-icon_btn-active: var(--uui-neutral-80);\n    }\n\n    .uui-icon_button.uui-color-secondary {\n        --uui-icon_btn: var(--uui-neutral-50);\n        --uui-icon_btn-hover: var(--uui-neutral-60);\n        --uui-icon_btn-active: var(--uui-neutral-70);\n    }\n\n    /* TooltipContainer */\n\n    .uui-tooltip-container.uui-color-white,\n    .uui-tooltip-container.uui-color-neutral {\n        --uui-tooltip-bg: var(--white);\n        --uui-tooltip-text: var(--uui-neutral-80);\n    }\n\n    .uui-tooltip-container.uui-color-red,\n    .uui-tooltip-container.uui-color-critical {\n        --uui-tooltip-bg: var(--uui-critical-60);\n    }\n\n    .uui-tooltip-container.uui-color-gray,\n    .uui-tooltip-container.uui-color-inverted {\n        --uui-tooltip-bg: var(--uui-neutral-80);\n        --uui-tooltip-text: var(--white);\n    }\n\n    /* CountIndicator */\n\n    .uui-count_indicator.uui-color-gray,\n    .uui-count_indicator.uui-color-neutral {\n        --uui-count_indicator-bg: var(--uui-neutral-30);\n        --uui-count_indicator-border: var(--uui-neutral-30);\n    }\n\n    .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n        --uui-count_indicator-caption: var(--uui-neutral-70);\n    }\n\n    /* Status Indicator */\n\n    .uui-status_indicator.uui-color-white.uui-fill-outline {\n        .uui-status_indicator_dot {\n            background-color: color-mix(in srgb, var(--white) 20%, transparent);\n            border: 1px solid var(--uui-neutral-40);\n        }\n    }\n\n    /* FlexRow */\n\n    .uui-flex-row.uui-color-none {\n        --uui-flex-row-bg: transparent;\n    }\n\n    .uui-flex-row.uui-color-white {\n        --uui-flex-row-bg: var(--white);\n    }\n\n    .uui-flex-row.uui-color-gray5 {\n        --uui-flex-row-bg: var(--gray5);\n    }\n\n    .uui-panel.uui-color-white {\n        --uui-panel-bg: var(--white);\n    }\n\n    .uui-panel.uui-color-gray90 {\n        --uui-panel-bg: var(--gray90);\n    }\n\n    /* Tag */\n\n    .uui-tag {\n        &.uui-color-white {\n            &.uui-fill-solid {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border-hover: var(--uui-neutral-10);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray10 {\n            &.uui-fill-solid {\n                --uui-tag-border-hover: var(--uui-neutral-20);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-5);\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-neutral,\n        &.uui-color-gray30 {\n            &.uui-fill-solid {\n                --uui-tag-bg: var(--uui-neutral-30);\n                --uui-tag-bg-hover: var(--uui-neutral-40);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-0);\n                    --uui-count_indicator-border: var(--uui-neutral-0);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-40);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray70 {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-neutral-0);\n                --uui-tag-fill: var(--uui-neutral-0);\n                --uui-tag-bg: var(--uui-neutral-70);\n                --uui-tag-border: var(--uui-neutral-70);\n                --uui-tag-bg-hover: var(--uui-neutral-80);\n                --uui-tag-border-hover: var(--uui-neutral-80);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n                    --uui-count_indicator-caption: var(--uui-neutral-0);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-50);\n                --uui-tag-border-hover: var(--uui-neutral-50);\n\n            }\n        }\n\n        &.uui-color-warning,\n        &.uui-color-amber {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-90);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n                }\n            }\n\n            &.uui-fill-outline .uui-count_indicator {\n                --uui-count_indicator-bg: var(--uui-neutral-0);\n                --uui-count_indicator-border: var(--uui-neutral-40);\n            }\n        }\n    }\n\n    .uui-dropdown-body {\n        --uui-dropdown_container-border-radius: 0;\n    }\n\n    .uui-link_button {\n        &.uui-size-42, &.uui-size-48 {\n            :global(.uui-caption) {\n                font-family: var(--font-museo-sans);\n                text-transform: uppercase;\n            }\n        }\n    }\n\n    /* fonts */\n\n    .uui-font-sans {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n    }\n\n    .uui-font-sans-semibold {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 600;\n    }\n\n    .uui-font-sans-italic {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n        --uui-text-font-style: italic;\n    }\n\n    .uui-font-museo-sans {\n        --uui-text-font: var(--font-museo-sans);\n        --uui-text-font-weight: normal;\n    }\n\n    .uui-font-museo-slab {\n        --uui-text-font: var(--font-museo-slab);\n        --uui-text-font-weight: normal;\n    }\n\n    /* Typography */\n\n    .uui-typography {\n        h1, h2, h3 {\n            font-family: var(--font-museo-sans);\n        }\n\n        h1 {\n            font-size: 36px;\n        }\n\n        .hero-header {\n            font-family: var(--font-museo-slab);\n        }\n\n        .promo-header:is(h1, h2, h3) {\n            font-family: var(--font-museo-sans);\n        }\n    }\n}\n\n.uui-theme-promo {\n    @include theme-promo();\n}\n\n","/*  Name convention  */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-promo {\n  --uui-font: \"Source Sans Pro\", sans-serif;\n  --uui-font-mono: \"Roboto Mono\", monospace;\n  --font-museo-sans: \"Museo Sans\", \"Source Sans Pro\", Arial, sans-serif;\n  --font-museo-slab: \"Museo Slab\", \"Roboto Slab\", Arial, sans-serif;\n  --gray5: #FAFAFC;\n  --gray10: #F5F6FA;\n  --gray20: #EBEDF5;\n  --gray30: #E1E3EB;\n  --gray40: #CED0DB;\n  --gray50: #ACAFBF;\n  --gray60: #6C6F80;\n  --gray70: #474A59;\n  --gray80: #303240;\n  --gray90: #1D1E26;\n  --blue-5: #F5FDFF;\n  --blue-10: #D6F2FF;\n  --blue-20: #99DDFF;\n  --blue-50: #007BBD;\n  --blue-60: #006AA3;\n  --blue-70: #005685;\n  --green-5: #FCFFF5;\n  --green-10: #EEFFCC;\n  --green-20: #CFF486;\n  --green-50: #65A300;\n  --green-60: #528500;\n  --green-70: #446600;\n  --amber-5: #FFFCF5;\n  --amber-10: #FFF2CC;\n  --amber-20: #FFE38F;\n  --amber-50: #FFC000;\n  --amber-60: #DB9D00;\n  --amber-70: #9F6B04;\n  --red-5: #FEF7F6;\n  --red-10: #FADED9;\n  --red-20: #F5B5A8;\n  --red-50: #DB3A1A;\n  --red-60: #C03316;\n  --red-70: #A02B13;\n  --white: #FFFFFF;\n  --yellow-5: #FFFFF0;\n  --yellow-10: #FFFECC;\n  --yellow-20: #FFFCA4;\n  --yellow-50: #FDD63B;\n  --yellow-60: #F9B71D;\n  --yellow-70: #D3910C;\n  --orange-5: #FEF8F4;\n  --orange-10: #FFE8D7;\n  --orange-20: #FFCCA7;\n  --orange-50: #FF8B3E;\n  --orange-60: #F76B0D;\n  --orange-70: #BD4B00;\n  --fuchsia-5: #FFF7FB;\n  --fuchsia-10: #F9D8E7;\n  --fuchsia-20: #EDADC8;\n  --fuchsia-50: #EA4386;\n  --fuchsia-60: #D61E68;\n  --fuchsia-70: #AE1955;\n  --purple-5: #FDF6FE;\n  --purple-10: #F2CCFA;\n  --purple-20: #E79DF5;\n  --purple-50: #B114D1;\n  --purple-60: #860F9E;\n  --purple-70: #5E0B6F;\n  --violet-5: #F8F6FE;\n  --violet-10: #DBCCFA;\n  --violet-20: #BB9DF5;\n  --violet-50: #773CEC;\n  --violet-60: #5514D6;\n  --violet-70: #40109E;\n  --cobalt-5: #F8FAFF;\n  --cobalt-10: #D9E2FC;\n  --cobalt-20: #AEC0F5;\n  --cobalt-50: #0F98FF;\n  --cobalt-60: #006FE5;\n  --cobalt-70: #0954A5;\n  --cyan-5: #F5FBFF;\n  --cyan-10: #D1FAFA;\n  --cyan-20: #AAEEEE;\n  --cyan-50: #14CCCC;\n  --cyan-60: #0F9E9E;\n  --cyan-70: #0B6F6F;\n  --mint-5: #F2FCF5;\n  --mint-10: #DDF3E4;\n  --mint-20: #B4DFC4;\n  --mint-50: #4FC48C;\n  --mint-60: #2E9E68;\n  --mint-70: #236E4A;\n  /* core variables start */\n  /* brand colors */\n  --uui-accent-5: var(--green-5);\n  --uui-accent-10: var(--green-10);\n  --uui-accent-20: var(--green-20);\n  --uui-accent-50: var(--green-50);\n  --uui-accent-60: var(--green-60);\n  --uui-accent-70: var(--green-70);\n  --uui-accent-contrast: var(--white);\n  --uui-primary-5: var(--blue-5);\n  --uui-primary-10: var(--blue-10);\n  --uui-primary-20: var(--blue-20);\n  --uui-primary-50: var(--blue-50);\n  --uui-primary-60: var(--blue-60);\n  --uui-primary-70: var(--blue-70);\n  --uui-primary-contrast: var(--white);\n  --uui-secondary-5: var(--gray10);\n  --uui-secondary-10: var(--gray20);\n  --uui-secondary-20: var(--gray30);\n  --uui-secondary-50: var(--gray60);\n  --uui-secondary-60: var(--gray70);\n  --uui-secondary-70: var(--gray80);\n  --uui-secondary-contrast: var(--white);\n  --uui-critical-5: var(--red-5);\n  --uui-critical-10: var(--red-10);\n  --uui-critical-20: var(--red-20);\n  --uui-critical-50: var(--red-50);\n  --uui-critical-60: var(--red-60);\n  --uui-critical-70: var(--red-70);\n  --uui-critical-contrast: var(--white);\n  /* semantic colors */\n  --uui-info-5: var(--blue-5);\n  --uui-info-10: var(--blue-10);\n  --uui-info-20: var(--blue-20);\n  --uui-info-50: var(--blue-50);\n  --uui-info-60: var(--blue-60);\n  --uui-info-70: var(--blue-70);\n  --uui-info-contrast: var(--white);\n  --uui-success-5: var(--green-5);\n  --uui-success-10: var(--green-10);\n  --uui-success-20: var(--green-20);\n  --uui-success-50: var(--green-50);\n  --uui-success-60: var(--green-60);\n  --uui-success-70: var(--green-70);\n  --uui-success-contrast: var(--white);\n  --uui-warning-5: var(--amber-5);\n  --uui-warning-10: var(--amber-10);\n  --uui-warning-20: var(--amber-20);\n  --uui-warning-50: var(--amber-50);\n  --uui-warning-60: var(--amber-60);\n  --uui-warning-70: var(--amber-70);\n  --uui-warning-contrast: var(--gray80);\n  --uui-error-5: var(--red-5);\n  --uui-error-10: var(--red-10);\n  --uui-error-20: var(--red-20);\n  --uui-error-50: var(--red-50);\n  --uui-error-60: var(--red-60);\n  --uui-error-70: var(--red-70);\n  --uui-error-contrast: var(--white);\n  --uui-neutral-0: #FFFFFF;\n  --uui-neutral-5: var(--gray5);\n  --uui-neutral-10: var(--gray10);\n  --uui-neutral-20: var(--gray20);\n  --uui-neutral-30: var(--gray30);\n  --uui-neutral-40: var(--gray40);\n  --uui-neutral-50: var(--gray50);\n  --uui-neutral-60: var(--gray60);\n  --uui-neutral-70: var(--gray70);\n  --uui-neutral-80: var(--gray80);\n  --uui-neutral-90: var(--gray90);\n  --uui-neutral-100: #000000;\n  /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */\n  --uui-app-bg: var(--uui-neutral-10);\n  --uui-overlay: rgba(29, 30, 38, 0.8);\n  --uui-surface-sunken: var(--uui-neutral-5);\n  --uui-surface-main: var(--uui-neutral-0);\n  --uui-surface-higher: var(--uui-neutral-10);\n  --uui-surface-highest: var(--uui-neutral-20);\n  --uui-divider: var(--uui-neutral-40);\n  --uui-divider-light: var(--uui-neutral-30);\n  --uui-text-brand: var(--uui-neutral-90);\n  --uui-text-primary: var(--uui-neutral-80);\n  --uui-text-secondary: var(--uui-neutral-70);\n  --uui-text-tertiary: var(--uui-neutral-60);\n  --uui-text-disabled: var(--uui-neutral-50);\n  --uui-text-info: var(--uui-info-70);\n  --uui-text-warning: var(--uui-warning-70);\n  --uui-text-critical: var(--uui-critical-70);\n  --uui-text-success: var(--uui-success-70);\n  /* not accepted part */\n  /* control specific */\n  --uui-link: var(--blue-50);\n  --uui-link-soft: var(--blue-5);\n  --uui-link-hover: var(--blue-60);\n  --uui-link-visited: #8018A0;\n  --uui-link-visited-hover: #601278;\n  --uui-link-disabled: var(--uui-neutral-50);\n  --uui-icon: var(--uui-neutral-60);\n  --uui-icon-hover: var(--uui-neutral-70);\n  --uui-icon-active: var(--uui-neutral-80);\n  --uui-icon-disabled: var(--uui-neutral-50);\n  --uui-control-bg: var(--uui-neutral-0);\n  --uui-control-bg-hover: var(--uui-neutral-60);\n  --uui-control-bg-disabled: var(--uui-neutral-5);\n  --uui-control-border: var(--uui-neutral-40);\n  --uui-control-border-hover: var(--uui-neutral-60);\n  --uui-control-border-focus: var(--uui-primary-50);\n  --uui-control-border-disabled: var(--uui-neutral-30);\n  --uui-control-placeholder: var(--uui-neutral-50);\n  --uui-control-placeholder-disabled: var(--uui-neutral-50);\n  --uui-control-text: var(--uui-text-primary);\n  --uui-control-text-disabled: var(--uui-text-tertiary);\n  --uui-control-icon: var(--uui-neutral-50);\n  --uui-control-icon-disabled: var(--uui-neutral-50);\n  --uui-outline-focus: #008ACE80;\n  --uui-skeleton: var(--uui-neutral-40);\n  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);\n  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n  --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);\n  --uui-border-radius: 0;\n  /* core variables end */\n  /* ------------------------------------ */\n  /* begin color classes */\n  /* Badge */\n  /* Button */\n  /* IconButton */\n  /* TooltipContainer */\n  /* CountIndicator */\n  /* Status Indicator */\n  /* FlexRow */\n  /* Tag */\n  /* fonts */\n  /* Typography */\n}\n.uui-theme-promo .uui-color-accent,\n.uui-theme-promo .uui-color-green {\n  --uui-color-5: var(--uui-accent-5);\n  --uui-color-10: var(--uui-accent-10);\n  --uui-color-20: var(--uui-accent-20);\n  --uui-color-50: var(--uui-accent-50);\n  --uui-color-60: var(--uui-accent-60);\n  --uui-color-70: var(--uui-accent-70);\n  --uui-color-contrast: var(--uui-accent-contrast);\n}\n.uui-theme-promo .uui-color-primary,\n.uui-theme-promo .uui-color-blue {\n  --uui-color-5: var(--uui-primary-5);\n  --uui-color-10: var(--uui-primary-10);\n  --uui-color-20: var(--uui-primary-20);\n  --uui-color-50: var(--uui-primary-50);\n  --uui-color-60: var(--uui-primary-60);\n  --uui-color-70: var(--uui-primary-70);\n  --uui-color-contrast: var(--uui-primary-contrast);\n}\n.uui-theme-promo .uui-color-secondary,\n.uui-theme-promo .uui-color-neutral,\n.uui-theme-promo .uui-color-gray {\n  --uui-color-5: var(--uui-secondary-5);\n  --uui-color-10: var(--uui-secondary-10);\n  --uui-color-20: var(--uui-secondary-20);\n  --uui-color-50: var(--uui-secondary-50);\n  --uui-color-60: var(--uui-secondary-60);\n  --uui-color-70: var(--uui-secondary-70);\n  --uui-color-contrast: var(--uui-secondary-contrast);\n}\n.uui-theme-promo .uui-color-critical,\n.uui-theme-promo .uui-color-red {\n  --uui-color-5: var(--uui-critical-5);\n  --uui-color-10: var(--uui-critical-10);\n  --uui-color-20: var(--uui-critical-20);\n  --uui-color-50: var(--uui-critical-50);\n  --uui-color-60: var(--uui-critical-60);\n  --uui-color-70: var(--uui-critical-70);\n  --uui-color-contrast: var(--uui-critical-contrast);\n}\n.uui-theme-promo .uui-color-info {\n  --uui-color-5: var(--uui-info-5);\n  --uui-color-10: var(--uui-info-10);\n  --uui-color-20: var(--uui-info-20);\n  --uui-color-50: var(--uui-info-50);\n  --uui-color-60: var(--uui-info-60);\n  --uui-color-70: var(--uui-info-70);\n  --uui-color-contrast: var(--uui-info-contrast);\n}\n.uui-theme-promo .uui-color-success {\n  --uui-color-5: var(--uui-success-5);\n  --uui-color-10: var(--uui-success-10);\n  --uui-color-20: var(--uui-success-20);\n  --uui-color-50: var(--uui-success-50);\n  --uui-color-60: var(--uui-success-60);\n  --uui-color-70: var(--uui-success-70);\n  --uui-color-contrast: var(--uui-success-contrast);\n}\n.uui-theme-promo .uui-color-warning,\n.uui-theme-promo .uui-color-amber {\n  --uui-color-5: var(--uui-warning-5);\n  --uui-color-10: var(--uui-warning-10);\n  --uui-color-20: var(--uui-warning-20);\n  --uui-color-50: var(--uui-warning-50);\n  --uui-color-60: var(--uui-warning-60);\n  --uui-color-70: var(--uui-warning-70);\n  --uui-color-contrast: var(--uui-warning-contrast);\n}\n.uui-theme-promo .uui-color-error {\n  --uui-color-5: var(--uui-error-5);\n  --uui-color-10: var(--uui-error-10);\n  --uui-color-20: var(--uui-error-20);\n  --uui-color-50: var(--uui-error-50);\n  --uui-color-60: var(--uui-error-60);\n  --uui-color-70: var(--uui-error-70);\n  --uui-color-contrast: var(--uui-error-contrast);\n}\n.uui-theme-promo .uui-color-white {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--white);\n  --uui-color-20: var(--white);\n  --uui-color-50: var(--white);\n  --uui-color-60: var(--gray10);\n  --uui-color-70: var(--gray20);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-gray5 {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--white);\n  --uui-color-20: var(--white);\n  --uui-color-50: var(--gray5);\n  --uui-color-60: var(--gray10);\n  --uui-color-70: var(--gray20);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-link_button.uui-color-contrast,\n.uui-theme-promo .uui-color-gray10 {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--white);\n  --uui-color-20: var(--gray5);\n  --uui-color-50: var(--gray10);\n  --uui-color-60: var(--gray20);\n  --uui-color-70: var(--gray30);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-gray30 {\n  --uui-color-5: var(--gray20);\n  --uui-color-10: var(--gray30);\n  --uui-color-20: var(--gray40);\n  --uui-color-50: var(--gray30);\n  --uui-color-60: var(--gray40);\n  --uui-color-70: var(--gray50);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-gray50 {\n  --uui-color-5: var(--gray5);\n  --uui-color-10: var(--gray10);\n  --uui-color-20: var(--gray20);\n  --uui-color-50: var(--gray50);\n  --uui-color-60: var(--gray60);\n  --uui-color-70: var(--gray70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-button.uui-color-gray50,\n.uui-theme-promo .uui-color-gray60 {\n  --uui-color-5: var(--gray20);\n  --uui-color-10: var(--gray60);\n  --uui-color-20: var(--gray40);\n  --uui-color-50: var(--gray60);\n  --uui-color-60: var(--gray70);\n  --uui-color-70: var(--gray80);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-gray80 {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--gray10);\n  --uui-color-20: var(--gray20);\n  --uui-color-50: var(--gray80);\n  --uui-color-60: var(--gray80);\n  --uui-color-70: var(--gray80);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-gray90 {\n  --uui-color-5: var(--gray60);\n  --uui-color-10: var(--gray70);\n  --uui-color-20: var(--gray80);\n  --uui-color-50: var(--gray90);\n  --uui-color-60: var(--gray90);\n  --uui-color-70: var(--gray90);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-yellow {\n  --uui-color-5: var(--yellow-5);\n  --uui-color-10: var(--yellow-10);\n  --uui-color-20: var(--yellow-20);\n  --uui-color-50: var(--yellow-50);\n  --uui-color-60: var(--yellow-60);\n  --uui-color-70: var(--yellow-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-orange {\n  --uui-color-5: var(--orange-5);\n  --uui-color-10: var(--orange-10);\n  --uui-color-20: var(--orange-20);\n  --uui-color-50: var(--orange-50);\n  --uui-color-60: var(--orange-60);\n  --uui-color-70: var(--orange-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-fuchsia {\n  --uui-color-5: var(--fuchsia-5);\n  --uui-color-10: var(--fuchsia-10);\n  --uui-color-20: var(--fuchsia-20);\n  --uui-color-50: var(--fuchsia-50);\n  --uui-color-60: var(--fuchsia-60);\n  --uui-color-70: var(--fuchsia-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-purple {\n  --uui-color-5: var(--purple-5);\n  --uui-color-10: var(--purple-10);\n  --uui-color-20: var(--purple-20);\n  --uui-color-50: var(--purple-50);\n  --uui-color-60: var(--purple-60);\n  --uui-color-70: var(--purple-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-violet {\n  --uui-color-5: var(--violet-5);\n  --uui-color-10: var(--violet-10);\n  --uui-color-20: var(--violet-20);\n  --uui-color-50: var(--violet-50);\n  --uui-color-60: var(--violet-60);\n  --uui-color-70: var(--violet-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-cobalt {\n  --uui-color-5: var(--cobalt-5);\n  --uui-color-10: var(--cobalt-10);\n  --uui-color-20: var(--cobalt-20);\n  --uui-color-50: var(--cobalt-50);\n  --uui-color-60: var(--cobalt-60);\n  --uui-color-70: var(--cobalt-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-cyan {\n  --uui-color-5: var(--cyan-5);\n  --uui-color-10: var(--cyan-10);\n  --uui-color-20: var(--cyan-20);\n  --uui-color-50: var(--cyan-50);\n  --uui-color-60: var(--cyan-60);\n  --uui-color-70: var(--cyan-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-mint {\n  --uui-color-5: var(--mint-5);\n  --uui-color-10: var(--mint-10);\n  --uui-color-20: var(--mint-20);\n  --uui-color-50: var(--mint-50);\n  --uui-color-60: var(--mint-60);\n  --uui-color-70: var(--mint-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-badge.uui-color-white.uui-fill-outline {\n  --uui-badge-bg-hover: var(--uui-neutral-10);\n  --uui-badge-border: var(--uui-neutral-30);\n  --uui-badge-border-hover: var(--uui-neutral-30);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-neutral,\n.uui-theme-promo .uui-badge.uui-color-gray30 {\n  --uui-badge-bg: var(--uui-neutral-30);\n  --uui-badge-bg-hover: var(--uui-neutral-40);\n  --uui-badge-border: var(--uui-neutral-30);\n  --uui-badge-border-hover: var(--uui-neutral-40);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-neutral.uui-fill-outline,\n.uui-theme-promo .uui-badge.uui-color-gray30.uui-fill-outline {\n  --uui-badge-bg: var(--uui-neutral-20);\n  --uui-badge-bg-hover: var(--uui-neutral-30);\n  --uui-badge-border: var(--uui-neutral-40);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-gray10 {\n  --uui-badge-bg: var(--uui-neutral-10);\n  --uui-badge-bg-hover: var(--uui-neutral-20);\n  --uui-badge-border: var(--uui-neutral-10);\n  --uui-badge-border-hover: var(--uui-neutral-20);\n}\n.uui-theme-promo .uui-badge.uui-color-gray10.uui-fill-outline {\n  --uui-badge-border: var(--uui-neutral-30);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-gray60.uui-fill-outline {\n  --uui-badge-bg-hover: var(--uui-neutral-30);\n  --uui-badge-border: var(--uui-neutral-60);\n  --uui-badge-border-hover: var(--uui-neutral-60);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-yellow.uui-fill-outline {\n  --uui-badge-border: var(--yellow-20);\n}\n.uui-theme-promo .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n  --uui-btn-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-button.uui-size-42 .uui-caption, .uui-theme-promo .uui-button.uui-size-48 .uui-caption {\n  font-family: var(--font-museo-sans);\n}\n.uui-theme-promo .uui-icon_button.uui-color-neutral,\n.uui-theme-promo .uui-icon_button.uui-color-gray60 {\n  --uui-icon_btn: var(--uui-neutral-60);\n  --uui-icon_btn-hover: var(--uui-neutral-70);\n  --uui-icon_btn-active: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-icon_button.uui-color-secondary {\n  --uui-icon_btn: var(--uui-neutral-50);\n  --uui-icon_btn-hover: var(--uui-neutral-60);\n  --uui-icon_btn-active: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-tooltip-container.uui-color-white,\n.uui-theme-promo .uui-tooltip-container.uui-color-neutral {\n  --uui-tooltip-bg: var(--white);\n  --uui-tooltip-text: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-tooltip-container.uui-color-red,\n.uui-theme-promo .uui-tooltip-container.uui-color-critical {\n  --uui-tooltip-bg: var(--uui-critical-60);\n}\n.uui-theme-promo .uui-tooltip-container.uui-color-gray,\n.uui-theme-promo .uui-tooltip-container.uui-color-inverted {\n  --uui-tooltip-bg: var(--uui-neutral-80);\n  --uui-tooltip-text: var(--white);\n}\n.uui-theme-promo .uui-count_indicator.uui-color-gray,\n.uui-theme-promo .uui-count_indicator.uui-color-neutral {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n  --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator_dot {\n  background-color: color-mix(in srgb, var(--white) 20%, transparent);\n  border: 1px solid var(--uui-neutral-40);\n}\n.uui-theme-promo .uui-flex-row.uui-color-none {\n  --uui-flex-row-bg: transparent;\n}\n.uui-theme-promo .uui-flex-row.uui-color-white {\n  --uui-flex-row-bg: var(--white);\n}\n.uui-theme-promo .uui-flex-row.uui-color-gray5 {\n  --uui-flex-row-bg: var(--gray5);\n}\n.uui-theme-promo .uui-panel.uui-color-white {\n  --uui-panel-bg: var(--white);\n}\n.uui-theme-promo .uui-panel.uui-color-gray90 {\n  --uui-panel-bg: var(--gray90);\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-solid {\n  --uui-tag-bg-hover: var(--uui-neutral-10);\n  --uui-tag-border-hover: var(--uui-neutral-10);\n  --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n  --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-outline {\n  --uui-tag-bg-hover: var(--uui-neutral-10);\n  --uui-tag-border: var(--uui-neutral-30);\n  --uui-tag-border-hover: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-solid {\n  --uui-tag-border-hover: var(--uui-neutral-20);\n  --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n  --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-outline {\n  --uui-tag-bg: var(--uui-neutral-5);\n  --uui-tag-bg-hover: var(--uui-neutral-10);\n  --uui-tag-border: var(--uui-neutral-30);\n  --uui-tag-border-hover: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-solid, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-solid {\n  --uui-tag-bg: var(--uui-neutral-30);\n  --uui-tag-bg-hover: var(--uui-neutral-40);\n  --uui-tag-border: var(--uui-neutral-30);\n  --uui-tag-border-hover: var(--uui-neutral-40);\n  --uui-tag-caption: var(--uui-text-primary);\n  --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-solid .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-0);\n  --uui-count_indicator-border: var(--uui-neutral-0);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-outline, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-outline {\n  --uui-tag-bg: var(--uui-neutral-20);\n  --uui-tag-bg-hover: var(--uui-neutral-30);\n  --uui-tag-border: var(--uui-neutral-40);\n  --uui-tag-border-hover: var(--uui-neutral-40);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-gray70.uui-fill-solid {\n  --uui-tag-caption: var(--uui-neutral-0);\n  --uui-tag-fill: var(--uui-neutral-0);\n  --uui-tag-bg: var(--uui-neutral-70);\n  --uui-tag-border: var(--uui-neutral-70);\n  --uui-tag-bg-hover: var(--uui-neutral-80);\n  --uui-tag-border-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-tag.uui-color-gray70.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n  --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n  --uui-count_indicator-caption: var(--uui-neutral-0);\n}\n.uui-theme-promo .uui-tag.uui-color-gray70.uui-fill-outline {\n  --uui-tag-bg: var(--uui-neutral-20);\n  --uui-tag-bg-hover: var(--uui-neutral-30);\n  --uui-tag-border: var(--uui-neutral-50);\n  --uui-tag-border-hover: var(--uui-neutral-50);\n}\n.uui-theme-promo .uui-tag.uui-color-warning.uui-fill-solid, .uui-theme-promo .uui-tag.uui-color-amber.uui-fill-solid {\n  --uui-tag-caption: var(--uui-text-primary);\n  --uui-tag-fill: var(--uui-neutral-90);\n}\n.uui-theme-promo .uui-tag.uui-color-warning.uui-fill-solid .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-amber.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n  --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n}\n.uui-theme-promo .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-amber.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-0);\n  --uui-count_indicator-border: var(--uui-neutral-40);\n}\n.uui-theme-promo .uui-dropdown-body {\n  --uui-dropdown_container-border-radius: 0;\n}\n.uui-theme-promo .uui-link_button.uui-size-42 :global(.uui-caption), .uui-theme-promo .uui-link_button.uui-size-48 :global(.uui-caption) {\n  font-family: var(--font-museo-sans);\n  text-transform: uppercase;\n}\n.uui-theme-promo .uui-font-sans {\n  --uui-text-font: var(--uui-font);\n  --uui-text-font-weight: 400;\n}\n.uui-theme-promo .uui-font-sans-semibold {\n  --uui-text-font: var(--uui-font);\n  --uui-text-font-weight: 600;\n}\n.uui-theme-promo .uui-font-sans-italic {\n  --uui-text-font: var(--uui-font);\n  --uui-text-font-weight: 400;\n  --uui-text-font-style: italic;\n}\n.uui-theme-promo .uui-font-museo-sans {\n  --uui-text-font: var(--font-museo-sans);\n  --uui-text-font-weight: normal;\n}\n.uui-theme-promo .uui-font-museo-slab {\n  --uui-text-font: var(--font-museo-slab);\n  --uui-text-font-weight: normal;\n}\n.uui-theme-promo .uui-typography h1, .uui-theme-promo .uui-typography h2, .uui-theme-promo .uui-typography h3 {\n  font-family: var(--font-museo-sans);\n}\n.uui-theme-promo .uui-typography h1 {\n  font-size: 36px;\n}\n.uui-theme-promo .uui-typography .hero-header {\n  font-family: var(--font-museo-slab);\n}\n.uui-theme-promo .uui-typography .promo-header:is(h1, h2, h3) {\n  font-family: var(--font-museo-sans);\n}"]}
+{"version":3,"sources":["../../../theme/theme_promo.scss%23sass","../../../../../theme/theme_promo.scss","../../../theme/theme_promo.scss"],"names":[],"mappings":"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","file":"theme_promo.css","sourcesContent":["/*  Name convention  */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n\n@mixin theme-promo {\n    --uui-font: 'Source Sans Pro', sans-serif;\n    --uui-font-mono: 'Roboto Mono', monospace;\n\n    // theme specific fonts\n    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;\n    --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;\n\n    --gray5: #FAFAFC;\n    --gray10: #F5F6FA;\n    --gray20: #EBEDF5;\n    --gray30: #E1E3EB;\n    --gray40: #CED0DB;\n    --gray50: #ACAFBF;\n    --gray60: #6C6F80;\n    --gray70: #474A59;\n    --gray80: #303240;\n    --gray90: #1D1E26;\n\n    --blue-5: #F5FDFF;\n    --blue-10: #D6F2FF;\n    --blue-20: #99DDFF;\n    --blue-50: #007BBD;\n    --blue-60: #006AA3;\n    --blue-70: #005685;\n\n    --green-5: #FCFFF5;\n    --green-10: #EEFFCC;\n    --green-20: #CFF486;\n    --green-50: #65A300;\n    --green-60: #528500;\n    --green-70: #446600;\n\n    --amber-5: #FFFCF5;\n    --amber-10: #FFF2CC;\n    --amber-20: #FFE38F;\n    --amber-50: #FFC000;\n    --amber-60: #DB9D00;\n    --amber-70: #9F6B04;\n\n    --red-5: #FEF7F6;\n    --red-10: #FADED9;\n    --red-20: #F5B5A8;\n    --red-50: #DB3A1A;\n    --red-60: #C03316;\n    --red-70: #A02B13;\n\n    --white: #FFFFFF;\n\n    --yellow-5: #FFFFF5;\n    --yellow-10: #FFFFE5;\n    --yellow-20: #FFFCA4;\n    --yellow-50: #FDD63B;\n    --yellow-60: #EDBE02;\n    --yellow-70: #BC7E02;\n\n    --orange-5: #FEF8F4;\n    --orange-10: #FFE8D7;\n    --orange-20: #FFCCA7;\n    --orange-50: #FF8B3E;\n    --orange-60: #F76B0D;\n    --orange-70: #BD4B00;\n\n    --fuchsia-5: #FFF7FB;\n    --fuchsia-10: #F9D8E7;\n    --fuchsia-20: #EDADC8;\n    --fuchsia-50: #EA4386;\n    --fuchsia-60: #D61E68;\n    --fuchsia-70: #AE1955;\n\n    --purple-5: #FDF6FE;\n    --purple-10: #F2CCFA;\n    --purple-20: #E79DF5;\n    --purple-50: #B114D1;\n    --purple-60: #860F9E;\n    --purple-70: #5E0B6F;\n\n    --violet-5: #F8F6FE;\n    --violet-10: #DBCCFA;\n    --violet-20: #BB9DF5;\n    --violet-50: #773CEC;\n    --violet-60: #5514D6;\n    --violet-70: #40109E;\n\n    --cobalt-5: #F8FAFF;\n    --cobalt-10: #D9E2FC;\n    --cobalt-20: #AEC0F5;\n    --cobalt-50: #0F98FF;\n    --cobalt-60: #006FE5;\n    --cobalt-70: #0954A5;\n\n    --cyan-5: #F6FEFE;\n    --cyan-10: #D1FAFA;\n    --cyan-20: #AAEEEE;\n    --cyan-50: #14CCCC;\n    --cyan-60: #12B5B5;\n    --cyan-70: #0B6F6F;\n\n    --mint-5: #F2FCF5;\n    --mint-10: #DDF3E4;\n    --mint-20: #B4DFC4;\n    --mint-50: #4FC48C;\n    --mint-60: #31AA70;\n    --mint-70: #236E4A;\n\n    /* core variables start */\n\n    /* brand colors */\n\n    --uui-primary-5: var(--blue-5);\n    --uui-primary-10: var(--blue-10);\n    --uui-primary-20: var(--blue-20);\n    --uui-primary-50: var(--blue-50);\n    --uui-primary-60: var(--blue-60);\n    --uui-primary-70: var(--blue-70);\n    --uui-primary-contrast: var(--white);\n\n    --uui-accent-5: var(--green-5);\n    --uui-accent-10: var(--green-10);\n    --uui-accent-20: var(--green-20);\n    --uui-accent-50: var(--green-50);\n    --uui-accent-60: var(--green-60);\n    --uui-accent-70: var(--green-70);\n    --uui-accent-contrast: var(--white);\n\n    --uui-secondary-5: var(--gray10);\n    --uui-secondary-10: var(--gray20);\n    --uui-secondary-20: var(--gray30);\n    --uui-secondary-50: var(--gray60);\n    --uui-secondary-60: var(--gray70);\n    --uui-secondary-70: var(--gray80);\n    --uui-secondary-contrast: var(--white);\n\n    --uui-critical-5: var(--red-5);\n    --uui-critical-10: var(--red-10);\n    --uui-critical-20: var(--red-20);\n    --uui-critical-50: var(--red-50);\n    --uui-critical-60: var(--red-60);\n    --uui-critical-70: var(--red-70);\n    --uui-critical-contrast: var(--white);\n\n    /* semantic colors */\n\n    --uui-info-5: var(--blue-5);\n    --uui-info-10: var(--blue-10);\n    --uui-info-20: var(--blue-20);\n    --uui-info-50: var(--blue-50);\n    --uui-info-60: var(--blue-60);\n    --uui-info-70: var(--blue-70);\n    --uui-info-contrast: var(--white);\n\n    --uui-success-5: var(--green-5);\n    --uui-success-10: var(--green-10);\n    --uui-success-20: var(--green-20);\n    --uui-success-50: var(--green-50);\n    --uui-success-60: var(--green-60);\n    --uui-success-70: var(--green-70);\n    --uui-success-contrast: var(--white);\n\n    --uui-warning-5: var(--amber-5);\n    --uui-warning-10: var(--amber-10);\n    --uui-warning-20: var(--amber-20);\n    --uui-warning-50: var(--amber-50);\n    --uui-warning-60: var(--amber-60);\n    --uui-warning-70: var(--amber-70);\n    --uui-warning-contrast: var(--gray80);\n\n    --uui-error-5: var(--red-5);\n    --uui-error-10: var(--red-10);\n    --uui-error-20: var(--red-20);\n    --uui-error-50: var(--red-50);\n    --uui-error-60: var(--red-60);\n    --uui-error-70: var(--red-70);\n    --uui-error-contrast: var(--white);\n\n    --uui-neutral-0: #FFFFFF;\n    --uui-neutral-5: var(--gray5);\n    --uui-neutral-10: var(--gray10);\n    --uui-neutral-20: var(--gray20);\n    --uui-neutral-30: var(--gray30);\n    --uui-neutral-40: var(--gray40);\n    --uui-neutral-50: var(--gray50);\n    --uui-neutral-60: var(--gray60);\n    --uui-neutral-70: var(--gray70);\n    --uui-neutral-80: var(--gray80);\n    --uui-neutral-90: var(--gray90);\n    --uui-neutral-100: #000000;\n\n    /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */\n\n    --uui-app-bg: var(--uui-neutral-10);\n    --uui-overlay: rgba(29, 30, 38, 0.8);\n\n    --uui-surface-sunken: var(--uui-neutral-5);\n    --uui-surface-main: var(--uui-neutral-0);\n    --uui-surface-higher: var(--uui-neutral-10);\n    --uui-surface-highest: var(--uui-neutral-20);\n\n    --uui-divider: var(--uui-neutral-40);\n    --uui-divider-light: var(--uui-neutral-30);\n\n    --uui-text-brand: var(--uui-neutral-90);\n    --uui-text-primary: var(--uui-neutral-80);\n    --uui-text-secondary: var(--uui-neutral-70);\n    --uui-text-tertiary: var(--uui-neutral-60);\n    --uui-text-disabled: var(--uui-neutral-50);\n\n    --uui-text-info: var(--uui-info-70);\n    --uui-text-warning: var(--uui-warning-70);\n    --uui-text-critical: var(--uui-critical-70);\n    --uui-text-success: var(--uui-success-70);\n\n    /* not accepted part */\n\n    /* control specific */\n\n    --uui-link: var(--blue-50);\n    --uui-link-soft: var(--blue-5);\n    --uui-link-hover: var(--blue-60);\n    --uui-link-visited: #8018A0;\n    --uui-link-visited-hover: #601278;\n    --uui-link-disabled: var(--uui-neutral-50);\n\n    --uui-icon: var(--uui-neutral-60);\n    --uui-icon-hover: var(--uui-neutral-70);\n    --uui-icon-active: var(--uui-neutral-80);\n    --uui-icon-disabled: var(--uui-neutral-50);\n\n    --uui-control-bg: var(--uui-neutral-0);\n    --uui-control-bg-hover: var(--uui-neutral-60);\n    --uui-control-bg-disabled: var(--uui-neutral-5);\n\n    --uui-control-border: var(--uui-neutral-40);\n    --uui-control-border-hover: var(--uui-neutral-60);\n    --uui-control-border-focus: var(--uui-primary-50);\n    --uui-control-border-disabled: var(--uui-neutral-30);\n\n    --uui-control-placeholder: var(--uui-neutral-50);\n    --uui-control-placeholder-disabled: var(--uui-neutral-50);\n\n    --uui-control-text: var(--uui-text-primary);\n    --uui-control-text-disabled: var(--uui-text-tertiary);\n\n    --uui-control-icon: var(--uui-neutral-50);\n    --uui-control-icon-disabled: var(--uui-neutral-50);\n\n    --uui-outline-focus: #008ACE80;\n\n    --uui-skeleton: var(--uui-neutral-40);\n\n    --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);\n    --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n    --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);\n\n    --uui-border-radius: 0;\n\n    /* core variables end */\n\n    /* ------------------------------------ */\n\n    /* begin color classes */\n\n    .uui-color-accent,\n    .uui-color-green {\n        --uui-color-5: var(--uui-accent-5);\n        --uui-color-10: var(--uui-accent-10);\n        --uui-color-20: var(--uui-accent-20);\n        --uui-color-50: var(--uui-accent-50);\n        --uui-color-60: var(--uui-accent-60);\n        --uui-color-70: var(--uui-accent-70);\n        --uui-color-contrast: var(--uui-accent-contrast);\n    }\n\n    .uui-color-primary,\n    .uui-color-blue {\n        --uui-color-5: var(--uui-primary-5);\n        --uui-color-10: var(--uui-primary-10);\n        --uui-color-20: var(--uui-primary-20);\n        --uui-color-50: var(--uui-primary-50);\n        --uui-color-60: var(--uui-primary-60);\n        --uui-color-70: var(--uui-primary-70);\n        --uui-color-contrast: var(--uui-primary-contrast);\n    }\n\n    .uui-color-secondary,\n    .uui-color-neutral,\n    .uui-color-gray {\n        --uui-color-5: var(--uui-secondary-5);\n        --uui-color-10: var(--uui-secondary-10);\n        --uui-color-20: var(--uui-secondary-20);\n        --uui-color-50: var(--uui-secondary-50);\n        --uui-color-60: var(--uui-secondary-60);\n        --uui-color-70: var(--uui-secondary-70);\n        --uui-color-contrast: var(--uui-secondary-contrast);\n    }\n\n    .uui-color-critical,\n    .uui-color-red {\n        --uui-color-5: var(--uui-critical-5);\n        --uui-color-10: var(--uui-critical-10);\n        --uui-color-20: var(--uui-critical-20);\n        --uui-color-50: var(--uui-critical-50);\n        --uui-color-60: var(--uui-critical-60);\n        --uui-color-70: var(--uui-critical-70);\n        --uui-color-contrast: var(--uui-critical-contrast);\n    }\n\n    .uui-color-info {\n        --uui-color-5: var(--uui-info-5);\n        --uui-color-10: var(--uui-info-10);\n        --uui-color-20: var(--uui-info-20);\n        --uui-color-50: var(--uui-info-50);\n        --uui-color-60: var(--uui-info-60);\n        --uui-color-70: var(--uui-info-70);\n        --uui-color-contrast: var(--uui-info-contrast);\n    }\n\n    .uui-color-success {\n        --uui-color-5: var(--uui-success-5);\n        --uui-color-10: var(--uui-success-10);\n        --uui-color-20: var(--uui-success-20);\n        --uui-color-50: var(--uui-success-50);\n        --uui-color-60: var(--uui-success-60);\n        --uui-color-70: var(--uui-success-70);\n        --uui-color-contrast: var(--uui-success-contrast);\n    }\n\n    .uui-color-warning,\n    .uui-color-amber {\n        --uui-color-5: var(--uui-warning-5);\n        --uui-color-10: var(--uui-warning-10);\n        --uui-color-20: var(--uui-warning-20);\n        --uui-color-50: var(--uui-warning-50);\n        --uui-color-60: var(--uui-warning-60);\n        --uui-color-70: var(--uui-warning-70);\n        --uui-color-contrast: var(--uui-warning-contrast);\n    }\n\n    .uui-color-error {\n        --uui-color-5: var(--uui-error-5);\n        --uui-color-10: var(--uui-error-10);\n        --uui-color-20: var(--uui-error-20);\n        --uui-color-50: var(--uui-error-50);\n        --uui-color-60: var(--uui-error-60);\n        --uui-color-70: var(--uui-error-70);\n        --uui-color-contrast: var(--uui-error-contrast);\n    }\n\n    .uui-color-white {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--white);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray5 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--gray5);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-link_button.uui-color-contrast,\n    .uui-color-gray10 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--gray5);\n        --uui-color-50: var(--gray10);\n        --uui-color-60: var(--gray20);\n        --uui-color-70: var(--gray30);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray30 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray30);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray30);\n        --uui-color-60: var(--gray40);\n        --uui-color-70: var(--gray50);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray50 {\n        --uui-color-5: var(--gray5);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray50);\n        --uui-color-60: var(--gray60);\n        --uui-color-70: var(--gray70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-button.uui-color-gray50,\n    .uui-color-gray60 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray60);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray60);\n        --uui-color-60: var(--gray70);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray80 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray80);\n        --uui-color-60: var(--gray80);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray90 {\n        --uui-color-5: var(--gray60);\n        --uui-color-10: var(--gray70);\n        --uui-color-20: var(--gray80);\n        --uui-color-50: var(--gray90);\n        --uui-color-60: var(--gray90);\n        --uui-color-70: var(--gray90);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-yellow {\n        --uui-color-5: var(--yellow-5);\n        --uui-color-10: var(--yellow-10);\n        --uui-color-20: var(--yellow-20);\n        --uui-color-50: var(--yellow-50);\n        --uui-color-60: var(--yellow-60);\n        --uui-color-70: var(--yellow-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-orange {\n        --uui-color-5: var(--orange-5);\n        --uui-color-10: var(--orange-10);\n        --uui-color-20: var(--orange-20);\n        --uui-color-50: var(--orange-50);\n        --uui-color-60: var(--orange-60);\n        --uui-color-70: var(--orange-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-fuchsia {\n        --uui-color-5: var(--fuchsia-5);\n        --uui-color-10: var(--fuchsia-10);\n        --uui-color-20: var(--fuchsia-20);\n        --uui-color-50: var(--fuchsia-50);\n        --uui-color-60: var(--fuchsia-60);\n        --uui-color-70: var(--fuchsia-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-purple {\n        --uui-color-5: var(--purple-5);\n        --uui-color-10: var(--purple-10);\n        --uui-color-20: var(--purple-20);\n        --uui-color-50: var(--purple-50);\n        --uui-color-60: var(--purple-60);\n        --uui-color-70: var(--purple-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-violet {\n        --uui-color-5: var(--violet-5);\n        --uui-color-10: var(--violet-10);\n        --uui-color-20: var(--violet-20);\n        --uui-color-50: var(--violet-50);\n        --uui-color-60: var(--violet-60);\n        --uui-color-70: var(--violet-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cobalt {\n        --uui-color-5: var(--cobalt-5);\n        --uui-color-10: var(--cobalt-10);\n        --uui-color-20: var(--cobalt-20);\n        --uui-color-50: var(--cobalt-50);\n        --uui-color-60: var(--cobalt-60);\n        --uui-color-70: var(--cobalt-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cyan {\n        --uui-color-5: var(--cyan-5);\n        --uui-color-10: var(--cyan-10);\n        --uui-color-20: var(--cyan-20);\n        --uui-color-50: var(--cyan-50);\n        --uui-color-60: var(--cyan-60);\n        --uui-color-70: var(--cyan-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-mint {\n        --uui-color-5: var(--mint-5);\n        --uui-color-10: var(--mint-10);\n        --uui-color-20: var(--mint-20);\n        --uui-color-50: var(--mint-50);\n        --uui-color-60: var(--mint-60);\n        --uui-color-70: var(--mint-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    /* Badge */\n\n    .uui-badge.uui-color-white {\n        &.uui-fill-outline {\n            --uui-badge-bg-hover: var(--uui-neutral-10);\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-neutral,\n    .uui-badge.uui-color-gray30 {\n        &.uui-fill-solid {\n            --uui-badge-bg: var(--uui-neutral-30);\n            --uui-badge-bg-hover: var(--uui-neutral-40);\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-40);\n            --uui-color-contrast: var(--uui-neutral-80);\n        }\n\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-20);\n            --uui-badge-border: var(--uui-neutral-40);\n            --uui-badge-bg-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray10 {\n        &.uui-fill-solid {\n            --uui-badge-bg-hover: var(--uui-neutral-20);\n            --uui-badge-border-hover: var(--uui-neutral-20);\n        }\n\n        &.uui-fill-outline {\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray60 {\n        &.uui-fill-outline {\n            --uui-badge-border: var(--uui-neutral-60);\n            --uui-badge-border-hover: var(--uui-neutral-60);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-yellow.uui-fill-outline {\n        --uui-badge-border: var(--yellow-20);\n    }\n\n    /* Button */\n\n    .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n        --uui-btn-caption: var(--uui-neutral-70);\n    }\n\n    .uui-button {\n        &.uui-size-42, &.uui-size-48 {\n            .uui-caption {\n                font-family: var(--font-museo-sans);\n            }\n        }\n    }\n\n    /* IconButton */\n\n    .uui-icon_button.uui-color-neutral,\n    .uui-icon_button.uui-color-gray60 {\n        --uui-icon_btn: var(--uui-neutral-60);\n        --uui-icon_btn-hover: var(--uui-neutral-70);\n        --uui-icon_btn-active: var(--uui-neutral-80);\n    }\n\n    .uui-icon_button.uui-color-secondary {\n        --uui-icon_btn: var(--uui-neutral-50);\n        --uui-icon_btn-hover: var(--uui-neutral-60);\n        --uui-icon_btn-active: var(--uui-neutral-70);\n    }\n\n    /* Tooltip */\n\n    .uui-tooltip-container.uui-color-white {\n        --uui-tooltip-bg: var(--uui-neutral-0);\n        --uui-tooltip-text: var(--uui-neutral-80);\n    }\n\n    .uui-tooltip-container.uui-color-red {\n        --uui-tooltip-bg: var(--uui-critical-60);\n    }\n\n    .uui-tooltip-container.uui-color-gray {\n        --uui-tooltip-bg: var(--uui-neutral-80);\n        --uui-tooltip-text: var(--uui-neutral-5);\n    }\n\n    /* CountIndicator */\n\n    .uui-count_indicator.uui-color-gray,\n    .uui-count_indicator.uui-color-neutral {\n        --uui-count_indicator-bg: var(--uui-neutral-30);\n        --uui-count_indicator-border: var(--uui-neutral-30);\n    }\n\n    .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n        --uui-count_indicator-caption: var(--uui-neutral-70);\n    }\n\n    /* Status Indicator */\n\n    .uui-status_indicator.uui-color-white.uui-fill-outline {\n        .uui-status_indicator_dot {\n            background-color: color-mix(in srgb, var(--white) 20%, transparent);\n            border: 1px solid var(--uui-neutral-40);\n        }\n    }\n\n    /* FlexRow */\n\n    .uui-flex-row.uui-color-none {\n        --uui-flex-row-bg: transparent;\n    }\n\n    .uui-flex-row.uui-color-white {\n        --uui-flex-row-bg: var(--white);\n    }\n\n    .uui-flex-row.uui-color-gray5 {\n        --uui-flex-row-bg: var(--gray5);\n    }\n\n    .uui-panel.uui-color-white {\n        --uui-panel-bg: var(--white);\n    }\n\n    .uui-panel.uui-color-gray90 {\n        --uui-panel-bg: var(--gray90);\n    }\n\n    /* Tag */\n\n    .uui-tag {\n        --uui-border-radius: 3px;\n\n        &.uui-color-white {\n            &.uui-fill-solid {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border-hover: var(--uui-neutral-10);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray10 {\n            &.uui-fill-solid {\n                --uui-tag-border-hover: var(--uui-neutral-20);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-5);\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-neutral,\n        &.uui-color-gray30 {\n            &.uui-fill-solid {\n                --uui-tag-bg: var(--uui-neutral-30);\n                --uui-tag-bg-hover: var(--uui-neutral-40);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-0);\n                    --uui-count_indicator-border: var(--uui-neutral-0);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-40);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray70 {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-neutral-0);\n                --uui-tag-fill: var(--uui-neutral-0);\n                --uui-tag-bg: var(--uui-neutral-70);\n                --uui-tag-border: var(--uui-neutral-70);\n                --uui-tag-bg-hover: var(--uui-neutral-80);\n                --uui-tag-border-hover: var(--uui-neutral-80);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n                    --uui-count_indicator-caption: var(--uui-neutral-0);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-50);\n                --uui-tag-border-hover: var(--uui-neutral-50);\n\n            }\n        }\n\n        &.uui-color-warning,\n        &.uui-color-amber {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-90);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n                }\n            }\n\n            &.uui-fill-outline .uui-count_indicator {\n                --uui-count_indicator-bg: var(--uui-neutral-0);\n                --uui-count_indicator-border: var(--uui-neutral-40);\n            }\n        }\n    }\n\n    .uui-dropdown-body {\n        --uui-dropdown_container-border-radius: 0;\n    }\n\n    .uui-link_button {\n        &.uui-size-42, &.uui-size-48 {\n            :global(.uui-caption) {\n                font-family: var(--font-museo-sans);\n                text-transform: uppercase;\n            }\n        }\n    }\n\n    /* fonts */\n\n    .uui-font-sans {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n    }\n\n    .uui-font-sans-semibold {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 600;\n    }\n\n    .uui-font-sans-italic {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n        --uui-text-font-style: italic;\n    }\n\n    .uui-font-museo-sans {\n        --uui-text-font: var(--font-museo-sans);\n        --uui-text-font-weight: normal;\n    }\n\n    .uui-font-museo-slab {\n        --uui-text-font: var(--font-museo-slab);\n        --uui-text-font-weight: normal;\n    }\n\n    /* Typography */\n\n    .uui-typography {\n        h1, h2, h3 {\n            font-family: var(--font-museo-sans);\n        }\n\n        h1 {\n            font-size: 36px;\n        }\n\n        .hero-header {\n            font-family: var(--font-museo-slab);\n        }\n\n        .promo-header:is(h1, h2, h3) {\n            font-family: var(--font-museo-sans);\n        }\n    }\n}\n\n.uui-theme-promo {\n    @include theme-promo();\n}\n\n","/*  Name convention  */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n\n@mixin theme-promo {\n    --uui-font: 'Source Sans Pro', sans-serif;\n    --uui-font-mono: 'Roboto Mono', monospace;\n\n    // theme specific fonts\n    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;\n    --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;\n\n    --gray5: #FAFAFC;\n    --gray10: #F5F6FA;\n    --gray20: #EBEDF5;\n    --gray30: #E1E3EB;\n    --gray40: #CED0DB;\n    --gray50: #ACAFBF;\n    --gray60: #6C6F80;\n    --gray70: #474A59;\n    --gray80: #303240;\n    --gray90: #1D1E26;\n\n    --blue-5: #F5FDFF;\n    --blue-10: #D6F2FF;\n    --blue-20: #99DDFF;\n    --blue-50: #007BBD;\n    --blue-60: #006AA3;\n    --blue-70: #005685;\n\n    --green-5: #FCFFF5;\n    --green-10: #EEFFCC;\n    --green-20: #CFF486;\n    --green-50: #65A300;\n    --green-60: #528500;\n    --green-70: #446600;\n\n    --amber-5: #FFFCF5;\n    --amber-10: #FFF2CC;\n    --amber-20: #FFE38F;\n    --amber-50: #FFC000;\n    --amber-60: #DB9D00;\n    --amber-70: #9F6B04;\n\n    --red-5: #FEF7F6;\n    --red-10: #FADED9;\n    --red-20: #F5B5A8;\n    --red-50: #DB3A1A;\n    --red-60: #C03316;\n    --red-70: #A02B13;\n\n    --white: #FFFFFF;\n\n    --yellow-5: #FFFFF5;\n    --yellow-10: #FFFFE5;\n    --yellow-20: #FFFCA4;\n    --yellow-50: #FDD63B;\n    --yellow-60: #EDBE02;\n    --yellow-70: #BC7E02;\n\n    --orange-5: #FEF8F4;\n    --orange-10: #FFE8D7;\n    --orange-20: #FFCCA7;\n    --orange-50: #FF8B3E;\n    --orange-60: #F76B0D;\n    --orange-70: #BD4B00;\n\n    --fuchsia-5: #FFF7FB;\n    --fuchsia-10: #F9D8E7;\n    --fuchsia-20: #EDADC8;\n    --fuchsia-50: #EA4386;\n    --fuchsia-60: #D61E68;\n    --fuchsia-70: #AE1955;\n\n    --purple-5: #FDF6FE;\n    --purple-10: #F2CCFA;\n    --purple-20: #E79DF5;\n    --purple-50: #B114D1;\n    --purple-60: #860F9E;\n    --purple-70: #5E0B6F;\n\n    --violet-5: #F8F6FE;\n    --violet-10: #DBCCFA;\n    --violet-20: #BB9DF5;\n    --violet-50: #773CEC;\n    --violet-60: #5514D6;\n    --violet-70: #40109E;\n\n    --cobalt-5: #F8FAFF;\n    --cobalt-10: #D9E2FC;\n    --cobalt-20: #AEC0F5;\n    --cobalt-50: #0F98FF;\n    --cobalt-60: #006FE5;\n    --cobalt-70: #0954A5;\n\n    --cyan-5: #F6FEFE;\n    --cyan-10: #D1FAFA;\n    --cyan-20: #AAEEEE;\n    --cyan-50: #14CCCC;\n    --cyan-60: #12B5B5;\n    --cyan-70: #0B6F6F;\n\n    --mint-5: #F2FCF5;\n    --mint-10: #DDF3E4;\n    --mint-20: #B4DFC4;\n    --mint-50: #4FC48C;\n    --mint-60: #31AA70;\n    --mint-70: #236E4A;\n\n    /* core variables start */\n\n    /* brand colors */\n\n    --uui-primary-5: var(--blue-5);\n    --uui-primary-10: var(--blue-10);\n    --uui-primary-20: var(--blue-20);\n    --uui-primary-50: var(--blue-50);\n    --uui-primary-60: var(--blue-60);\n    --uui-primary-70: var(--blue-70);\n    --uui-primary-contrast: var(--white);\n\n    --uui-accent-5: var(--green-5);\n    --uui-accent-10: var(--green-10);\n    --uui-accent-20: var(--green-20);\n    --uui-accent-50: var(--green-50);\n    --uui-accent-60: var(--green-60);\n    --uui-accent-70: var(--green-70);\n    --uui-accent-contrast: var(--white);\n\n    --uui-secondary-5: var(--gray10);\n    --uui-secondary-10: var(--gray20);\n    --uui-secondary-20: var(--gray30);\n    --uui-secondary-50: var(--gray60);\n    --uui-secondary-60: var(--gray70);\n    --uui-secondary-70: var(--gray80);\n    --uui-secondary-contrast: var(--white);\n\n    --uui-critical-5: var(--red-5);\n    --uui-critical-10: var(--red-10);\n    --uui-critical-20: var(--red-20);\n    --uui-critical-50: var(--red-50);\n    --uui-critical-60: var(--red-60);\n    --uui-critical-70: var(--red-70);\n    --uui-critical-contrast: var(--white);\n\n    /* semantic colors */\n\n    --uui-info-5: var(--blue-5);\n    --uui-info-10: var(--blue-10);\n    --uui-info-20: var(--blue-20);\n    --uui-info-50: var(--blue-50);\n    --uui-info-60: var(--blue-60);\n    --uui-info-70: var(--blue-70);\n    --uui-info-contrast: var(--white);\n\n    --uui-success-5: var(--green-5);\n    --uui-success-10: var(--green-10);\n    --uui-success-20: var(--green-20);\n    --uui-success-50: var(--green-50);\n    --uui-success-60: var(--green-60);\n    --uui-success-70: var(--green-70);\n    --uui-success-contrast: var(--white);\n\n    --uui-warning-5: var(--amber-5);\n    --uui-warning-10: var(--amber-10);\n    --uui-warning-20: var(--amber-20);\n    --uui-warning-50: var(--amber-50);\n    --uui-warning-60: var(--amber-60);\n    --uui-warning-70: var(--amber-70);\n    --uui-warning-contrast: var(--gray80);\n\n    --uui-error-5: var(--red-5);\n    --uui-error-10: var(--red-10);\n    --uui-error-20: var(--red-20);\n    --uui-error-50: var(--red-50);\n    --uui-error-60: var(--red-60);\n    --uui-error-70: var(--red-70);\n    --uui-error-contrast: var(--white);\n\n    --uui-neutral-0: #FFFFFF;\n    --uui-neutral-5: var(--gray5);\n    --uui-neutral-10: var(--gray10);\n    --uui-neutral-20: var(--gray20);\n    --uui-neutral-30: var(--gray30);\n    --uui-neutral-40: var(--gray40);\n    --uui-neutral-50: var(--gray50);\n    --uui-neutral-60: var(--gray60);\n    --uui-neutral-70: var(--gray70);\n    --uui-neutral-80: var(--gray80);\n    --uui-neutral-90: var(--gray90);\n    --uui-neutral-100: #000000;\n\n    /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */\n\n    --uui-app-bg: var(--uui-neutral-10);\n    --uui-overlay: rgba(29, 30, 38, 0.8);\n\n    --uui-surface-sunken: var(--uui-neutral-5);\n    --uui-surface-main: var(--uui-neutral-0);\n    --uui-surface-higher: var(--uui-neutral-10);\n    --uui-surface-highest: var(--uui-neutral-20);\n\n    --uui-divider: var(--uui-neutral-40);\n    --uui-divider-light: var(--uui-neutral-30);\n\n    --uui-text-brand: var(--uui-neutral-90);\n    --uui-text-primary: var(--uui-neutral-80);\n    --uui-text-secondary: var(--uui-neutral-70);\n    --uui-text-tertiary: var(--uui-neutral-60);\n    --uui-text-disabled: var(--uui-neutral-50);\n\n    --uui-text-info: var(--uui-info-70);\n    --uui-text-warning: var(--uui-warning-70);\n    --uui-text-critical: var(--uui-critical-70);\n    --uui-text-success: var(--uui-success-70);\n\n    /* not accepted part */\n\n    /* control specific */\n\n    --uui-link: var(--blue-50);\n    --uui-link-soft: var(--blue-5);\n    --uui-link-hover: var(--blue-60);\n    --uui-link-visited: #8018A0;\n    --uui-link-visited-hover: #601278;\n    --uui-link-disabled: var(--uui-neutral-50);\n\n    --uui-icon: var(--uui-neutral-60);\n    --uui-icon-hover: var(--uui-neutral-70);\n    --uui-icon-active: var(--uui-neutral-80);\n    --uui-icon-disabled: var(--uui-neutral-50);\n\n    --uui-control-bg: var(--uui-neutral-0);\n    --uui-control-bg-hover: var(--uui-neutral-60);\n    --uui-control-bg-disabled: var(--uui-neutral-5);\n\n    --uui-control-border: var(--uui-neutral-40);\n    --uui-control-border-hover: var(--uui-neutral-60);\n    --uui-control-border-focus: var(--uui-primary-50);\n    --uui-control-border-disabled: var(--uui-neutral-30);\n\n    --uui-control-placeholder: var(--uui-neutral-50);\n    --uui-control-placeholder-disabled: var(--uui-neutral-50);\n\n    --uui-control-text: var(--uui-text-primary);\n    --uui-control-text-disabled: var(--uui-text-tertiary);\n\n    --uui-control-icon: var(--uui-neutral-50);\n    --uui-control-icon-disabled: var(--uui-neutral-50);\n\n    --uui-outline-focus: #008ACE80;\n\n    --uui-skeleton: var(--uui-neutral-40);\n\n    --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);\n    --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n    --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);\n\n    --uui-border-radius: 0;\n\n    /* core variables end */\n\n    /* ------------------------------------ */\n\n    /* begin color classes */\n\n    .uui-color-accent,\n    .uui-color-green {\n        --uui-color-5: var(--uui-accent-5);\n        --uui-color-10: var(--uui-accent-10);\n        --uui-color-20: var(--uui-accent-20);\n        --uui-color-50: var(--uui-accent-50);\n        --uui-color-60: var(--uui-accent-60);\n        --uui-color-70: var(--uui-accent-70);\n        --uui-color-contrast: var(--uui-accent-contrast);\n    }\n\n    .uui-color-primary,\n    .uui-color-blue {\n        --uui-color-5: var(--uui-primary-5);\n        --uui-color-10: var(--uui-primary-10);\n        --uui-color-20: var(--uui-primary-20);\n        --uui-color-50: var(--uui-primary-50);\n        --uui-color-60: var(--uui-primary-60);\n        --uui-color-70: var(--uui-primary-70);\n        --uui-color-contrast: var(--uui-primary-contrast);\n    }\n\n    .uui-color-secondary,\n    .uui-color-neutral,\n    .uui-color-gray {\n        --uui-color-5: var(--uui-secondary-5);\n        --uui-color-10: var(--uui-secondary-10);\n        --uui-color-20: var(--uui-secondary-20);\n        --uui-color-50: var(--uui-secondary-50);\n        --uui-color-60: var(--uui-secondary-60);\n        --uui-color-70: var(--uui-secondary-70);\n        --uui-color-contrast: var(--uui-secondary-contrast);\n    }\n\n    .uui-color-critical,\n    .uui-color-red {\n        --uui-color-5: var(--uui-critical-5);\n        --uui-color-10: var(--uui-critical-10);\n        --uui-color-20: var(--uui-critical-20);\n        --uui-color-50: var(--uui-critical-50);\n        --uui-color-60: var(--uui-critical-60);\n        --uui-color-70: var(--uui-critical-70);\n        --uui-color-contrast: var(--uui-critical-contrast);\n    }\n\n    .uui-color-info {\n        --uui-color-5: var(--uui-info-5);\n        --uui-color-10: var(--uui-info-10);\n        --uui-color-20: var(--uui-info-20);\n        --uui-color-50: var(--uui-info-50);\n        --uui-color-60: var(--uui-info-60);\n        --uui-color-70: var(--uui-info-70);\n        --uui-color-contrast: var(--uui-info-contrast);\n    }\n\n    .uui-color-success {\n        --uui-color-5: var(--uui-success-5);\n        --uui-color-10: var(--uui-success-10);\n        --uui-color-20: var(--uui-success-20);\n        --uui-color-50: var(--uui-success-50);\n        --uui-color-60: var(--uui-success-60);\n        --uui-color-70: var(--uui-success-70);\n        --uui-color-contrast: var(--uui-success-contrast);\n    }\n\n    .uui-color-warning,\n    .uui-color-amber {\n        --uui-color-5: var(--uui-warning-5);\n        --uui-color-10: var(--uui-warning-10);\n        --uui-color-20: var(--uui-warning-20);\n        --uui-color-50: var(--uui-warning-50);\n        --uui-color-60: var(--uui-warning-60);\n        --uui-color-70: var(--uui-warning-70);\n        --uui-color-contrast: var(--uui-warning-contrast);\n    }\n\n    .uui-color-error {\n        --uui-color-5: var(--uui-error-5);\n        --uui-color-10: var(--uui-error-10);\n        --uui-color-20: var(--uui-error-20);\n        --uui-color-50: var(--uui-error-50);\n        --uui-color-60: var(--uui-error-60);\n        --uui-color-70: var(--uui-error-70);\n        --uui-color-contrast: var(--uui-error-contrast);\n    }\n\n    .uui-color-white {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--white);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray5 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--white);\n        --uui-color-50: var(--gray5);\n        --uui-color-60: var(--gray10);\n        --uui-color-70: var(--gray20);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-link_button.uui-color-contrast,\n    .uui-color-gray10 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--gray5);\n        --uui-color-50: var(--gray10);\n        --uui-color-60: var(--gray20);\n        --uui-color-70: var(--gray30);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray30 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray30);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray30);\n        --uui-color-60: var(--gray40);\n        --uui-color-70: var(--gray50);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-gray50 {\n        --uui-color-5: var(--gray5);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray50);\n        --uui-color-60: var(--gray60);\n        --uui-color-70: var(--gray70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-button.uui-color-gray50,\n    .uui-color-gray60 {\n        --uui-color-5: var(--gray20);\n        --uui-color-10: var(--gray60);\n        --uui-color-20: var(--gray40);\n        --uui-color-50: var(--gray60);\n        --uui-color-60: var(--gray70);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray80 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--gray10);\n        --uui-color-20: var(--gray20);\n        --uui-color-50: var(--gray80);\n        --uui-color-60: var(--gray80);\n        --uui-color-70: var(--gray80);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-gray90 {\n        --uui-color-5: var(--gray60);\n        --uui-color-10: var(--gray70);\n        --uui-color-20: var(--gray80);\n        --uui-color-50: var(--gray90);\n        --uui-color-60: var(--gray90);\n        --uui-color-70: var(--gray90);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-yellow {\n        --uui-color-5: var(--yellow-5);\n        --uui-color-10: var(--yellow-10);\n        --uui-color-20: var(--yellow-20);\n        --uui-color-50: var(--yellow-50);\n        --uui-color-60: var(--yellow-60);\n        --uui-color-70: var(--yellow-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-orange {\n        --uui-color-5: var(--orange-5);\n        --uui-color-10: var(--orange-10);\n        --uui-color-20: var(--orange-20);\n        --uui-color-50: var(--orange-50);\n        --uui-color-60: var(--orange-60);\n        --uui-color-70: var(--orange-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-fuchsia {\n        --uui-color-5: var(--fuchsia-5);\n        --uui-color-10: var(--fuchsia-10);\n        --uui-color-20: var(--fuchsia-20);\n        --uui-color-50: var(--fuchsia-50);\n        --uui-color-60: var(--fuchsia-60);\n        --uui-color-70: var(--fuchsia-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-purple {\n        --uui-color-5: var(--purple-5);\n        --uui-color-10: var(--purple-10);\n        --uui-color-20: var(--purple-20);\n        --uui-color-50: var(--purple-50);\n        --uui-color-60: var(--purple-60);\n        --uui-color-70: var(--purple-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-violet {\n        --uui-color-5: var(--violet-5);\n        --uui-color-10: var(--violet-10);\n        --uui-color-20: var(--violet-20);\n        --uui-color-50: var(--violet-50);\n        --uui-color-60: var(--violet-60);\n        --uui-color-70: var(--violet-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cobalt {\n        --uui-color-5: var(--cobalt-5);\n        --uui-color-10: var(--cobalt-10);\n        --uui-color-20: var(--cobalt-20);\n        --uui-color-50: var(--cobalt-50);\n        --uui-color-60: var(--cobalt-60);\n        --uui-color-70: var(--cobalt-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cyan {\n        --uui-color-5: var(--cyan-5);\n        --uui-color-10: var(--cyan-10);\n        --uui-color-20: var(--cyan-20);\n        --uui-color-50: var(--cyan-50);\n        --uui-color-60: var(--cyan-60);\n        --uui-color-70: var(--cyan-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    .uui-color-mint {\n        --uui-color-5: var(--mint-5);\n        --uui-color-10: var(--mint-10);\n        --uui-color-20: var(--mint-20);\n        --uui-color-50: var(--mint-50);\n        --uui-color-60: var(--mint-60);\n        --uui-color-70: var(--mint-70);\n        --uui-color-contrast: var(--gray80);\n    }\n\n    /* Badge */\n\n    .uui-badge.uui-color-white {\n        &.uui-fill-outline {\n            --uui-badge-bg-hover: var(--uui-neutral-10);\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-neutral,\n    .uui-badge.uui-color-gray30 {\n        &.uui-fill-solid {\n            --uui-badge-bg: var(--uui-neutral-30);\n            --uui-badge-bg-hover: var(--uui-neutral-40);\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-40);\n            --uui-color-contrast: var(--uui-neutral-80);\n        }\n\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-20);\n            --uui-badge-border: var(--uui-neutral-40);\n            --uui-badge-bg-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray10 {\n        &.uui-fill-solid {\n            --uui-badge-bg-hover: var(--uui-neutral-20);\n            --uui-badge-border-hover: var(--uui-neutral-20);\n        }\n\n        &.uui-fill-outline {\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-gray60 {\n        &.uui-fill-outline {\n            --uui-badge-border: var(--uui-neutral-60);\n            --uui-badge-border-hover: var(--uui-neutral-60);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-yellow.uui-fill-outline {\n        --uui-badge-border: var(--yellow-20);\n    }\n\n    /* Button */\n\n    .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n        --uui-btn-caption: var(--uui-neutral-70);\n    }\n\n    .uui-button {\n        &.uui-size-42, &.uui-size-48 {\n            .uui-caption {\n                font-family: var(--font-museo-sans);\n            }\n        }\n    }\n\n    /* IconButton */\n\n    .uui-icon_button.uui-color-neutral,\n    .uui-icon_button.uui-color-gray60 {\n        --uui-icon_btn: var(--uui-neutral-60);\n        --uui-icon_btn-hover: var(--uui-neutral-70);\n        --uui-icon_btn-active: var(--uui-neutral-80);\n    }\n\n    .uui-icon_button.uui-color-secondary {\n        --uui-icon_btn: var(--uui-neutral-50);\n        --uui-icon_btn-hover: var(--uui-neutral-60);\n        --uui-icon_btn-active: var(--uui-neutral-70);\n    }\n\n    /* Tooltip */\n\n    .uui-tooltip-container.uui-color-white {\n        --uui-tooltip-bg: var(--uui-neutral-0);\n        --uui-tooltip-text: var(--uui-neutral-80);\n    }\n\n    .uui-tooltip-container.uui-color-red {\n        --uui-tooltip-bg: var(--uui-critical-60);\n    }\n\n    .uui-tooltip-container.uui-color-gray {\n        --uui-tooltip-bg: var(--uui-neutral-80);\n        --uui-tooltip-text: var(--uui-neutral-5);\n    }\n\n    /* CountIndicator */\n\n    .uui-count_indicator.uui-color-gray,\n    .uui-count_indicator.uui-color-neutral {\n        --uui-count_indicator-bg: var(--uui-neutral-30);\n        --uui-count_indicator-border: var(--uui-neutral-30);\n    }\n\n    .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n        --uui-count_indicator-caption: var(--uui-neutral-70);\n    }\n\n    /* Status Indicator */\n\n    .uui-status_indicator.uui-color-white.uui-fill-outline {\n        .uui-status_indicator_dot {\n            background-color: color-mix(in srgb, var(--white) 20%, transparent);\n            border: 1px solid var(--uui-neutral-40);\n        }\n    }\n\n    /* FlexRow */\n\n    .uui-flex-row.uui-color-none {\n        --uui-flex-row-bg: transparent;\n    }\n\n    .uui-flex-row.uui-color-white {\n        --uui-flex-row-bg: var(--white);\n    }\n\n    .uui-flex-row.uui-color-gray5 {\n        --uui-flex-row-bg: var(--gray5);\n    }\n\n    .uui-panel.uui-color-white {\n        --uui-panel-bg: var(--white);\n    }\n\n    .uui-panel.uui-color-gray90 {\n        --uui-panel-bg: var(--gray90);\n    }\n\n    /* Tag */\n\n    .uui-tag {\n        --uui-border-radius: 3px;\n\n        &.uui-color-white {\n            &.uui-fill-solid {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border-hover: var(--uui-neutral-10);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray10 {\n            &.uui-fill-solid {\n                --uui-tag-border-hover: var(--uui-neutral-20);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-5);\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-neutral,\n        &.uui-color-gray30 {\n            &.uui-fill-solid {\n                --uui-tag-bg: var(--uui-neutral-30);\n                --uui-tag-bg-hover: var(--uui-neutral-40);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-60);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-0);\n                    --uui-count_indicator-border: var(--uui-neutral-0);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-40);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-gray70 {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-neutral-0);\n                --uui-tag-fill: var(--uui-neutral-0);\n                --uui-tag-bg: var(--uui-neutral-70);\n                --uui-tag-border: var(--uui-neutral-70);\n                --uui-tag-bg-hover: var(--uui-neutral-80);\n                --uui-tag-border-hover: var(--uui-neutral-80);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n                    --uui-count_indicator-caption: var(--uui-neutral-0);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-50);\n                --uui-tag-border-hover: var(--uui-neutral-50);\n\n            }\n        }\n\n        &.uui-color-warning,\n        &.uui-color-amber {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-90);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n                }\n            }\n\n            &.uui-fill-outline .uui-count_indicator {\n                --uui-count_indicator-bg: var(--uui-neutral-0);\n                --uui-count_indicator-border: var(--uui-neutral-40);\n            }\n        }\n    }\n\n    .uui-dropdown-body {\n        --uui-dropdown_container-border-radius: 0;\n    }\n\n    .uui-link_button {\n        &.uui-size-42, &.uui-size-48 {\n            :global(.uui-caption) {\n                font-family: var(--font-museo-sans);\n                text-transform: uppercase;\n            }\n        }\n    }\n\n    /* fonts */\n\n    .uui-font-sans {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n    }\n\n    .uui-font-sans-semibold {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 600;\n    }\n\n    .uui-font-sans-italic {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n        --uui-text-font-style: italic;\n    }\n\n    .uui-font-museo-sans {\n        --uui-text-font: var(--font-museo-sans);\n        --uui-text-font-weight: normal;\n    }\n\n    .uui-font-museo-slab {\n        --uui-text-font: var(--font-museo-slab);\n        --uui-text-font-weight: normal;\n    }\n\n    /* Typography */\n\n    .uui-typography {\n        h1, h2, h3 {\n            font-family: var(--font-museo-sans);\n        }\n\n        h1 {\n            font-size: 36px;\n        }\n\n        .hero-header {\n            font-family: var(--font-museo-slab);\n        }\n\n        .promo-header:is(h1, h2, h3) {\n            font-family: var(--font-museo-sans);\n        }\n    }\n}\n\n.uui-theme-promo {\n    @include theme-promo();\n}\n\n","/*  Name convention  */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-promo {\n  --uui-font: \"Source Sans Pro\", sans-serif;\n  --uui-font-mono: \"Roboto Mono\", monospace;\n  --font-museo-sans: \"Museo Sans\", \"Source Sans Pro\", Arial, sans-serif;\n  --font-museo-slab: \"Museo Slab\", \"Roboto Slab\", Arial, sans-serif;\n  --gray5: #FAFAFC;\n  --gray10: #F5F6FA;\n  --gray20: #EBEDF5;\n  --gray30: #E1E3EB;\n  --gray40: #CED0DB;\n  --gray50: #ACAFBF;\n  --gray60: #6C6F80;\n  --gray70: #474A59;\n  --gray80: #303240;\n  --gray90: #1D1E26;\n  --blue-5: #F5FDFF;\n  --blue-10: #D6F2FF;\n  --blue-20: #99DDFF;\n  --blue-50: #007BBD;\n  --blue-60: #006AA3;\n  --blue-70: #005685;\n  --green-5: #FCFFF5;\n  --green-10: #EEFFCC;\n  --green-20: #CFF486;\n  --green-50: #65A300;\n  --green-60: #528500;\n  --green-70: #446600;\n  --amber-5: #FFFCF5;\n  --amber-10: #FFF2CC;\n  --amber-20: #FFE38F;\n  --amber-50: #FFC000;\n  --amber-60: #DB9D00;\n  --amber-70: #9F6B04;\n  --red-5: #FEF7F6;\n  --red-10: #FADED9;\n  --red-20: #F5B5A8;\n  --red-50: #DB3A1A;\n  --red-60: #C03316;\n  --red-70: #A02B13;\n  --white: #FFFFFF;\n  --yellow-5: #FFFFF5;\n  --yellow-10: #FFFFE5;\n  --yellow-20: #FFFCA4;\n  --yellow-50: #FDD63B;\n  --yellow-60: #EDBE02;\n  --yellow-70: #BC7E02;\n  --orange-5: #FEF8F4;\n  --orange-10: #FFE8D7;\n  --orange-20: #FFCCA7;\n  --orange-50: #FF8B3E;\n  --orange-60: #F76B0D;\n  --orange-70: #BD4B00;\n  --fuchsia-5: #FFF7FB;\n  --fuchsia-10: #F9D8E7;\n  --fuchsia-20: #EDADC8;\n  --fuchsia-50: #EA4386;\n  --fuchsia-60: #D61E68;\n  --fuchsia-70: #AE1955;\n  --purple-5: #FDF6FE;\n  --purple-10: #F2CCFA;\n  --purple-20: #E79DF5;\n  --purple-50: #B114D1;\n  --purple-60: #860F9E;\n  --purple-70: #5E0B6F;\n  --violet-5: #F8F6FE;\n  --violet-10: #DBCCFA;\n  --violet-20: #BB9DF5;\n  --violet-50: #773CEC;\n  --violet-60: #5514D6;\n  --violet-70: #40109E;\n  --cobalt-5: #F8FAFF;\n  --cobalt-10: #D9E2FC;\n  --cobalt-20: #AEC0F5;\n  --cobalt-50: #0F98FF;\n  --cobalt-60: #006FE5;\n  --cobalt-70: #0954A5;\n  --cyan-5: #F6FEFE;\n  --cyan-10: #D1FAFA;\n  --cyan-20: #AAEEEE;\n  --cyan-50: #14CCCC;\n  --cyan-60: #12B5B5;\n  --cyan-70: #0B6F6F;\n  --mint-5: #F2FCF5;\n  --mint-10: #DDF3E4;\n  --mint-20: #B4DFC4;\n  --mint-50: #4FC48C;\n  --mint-60: #31AA70;\n  --mint-70: #236E4A;\n  /* core variables start */\n  /* brand colors */\n  --uui-primary-5: var(--blue-5);\n  --uui-primary-10: var(--blue-10);\n  --uui-primary-20: var(--blue-20);\n  --uui-primary-50: var(--blue-50);\n  --uui-primary-60: var(--blue-60);\n  --uui-primary-70: var(--blue-70);\n  --uui-primary-contrast: var(--white);\n  --uui-accent-5: var(--green-5);\n  --uui-accent-10: var(--green-10);\n  --uui-accent-20: var(--green-20);\n  --uui-accent-50: var(--green-50);\n  --uui-accent-60: var(--green-60);\n  --uui-accent-70: var(--green-70);\n  --uui-accent-contrast: var(--white);\n  --uui-secondary-5: var(--gray10);\n  --uui-secondary-10: var(--gray20);\n  --uui-secondary-20: var(--gray30);\n  --uui-secondary-50: var(--gray60);\n  --uui-secondary-60: var(--gray70);\n  --uui-secondary-70: var(--gray80);\n  --uui-secondary-contrast: var(--white);\n  --uui-critical-5: var(--red-5);\n  --uui-critical-10: var(--red-10);\n  --uui-critical-20: var(--red-20);\n  --uui-critical-50: var(--red-50);\n  --uui-critical-60: var(--red-60);\n  --uui-critical-70: var(--red-70);\n  --uui-critical-contrast: var(--white);\n  /* semantic colors */\n  --uui-info-5: var(--blue-5);\n  --uui-info-10: var(--blue-10);\n  --uui-info-20: var(--blue-20);\n  --uui-info-50: var(--blue-50);\n  --uui-info-60: var(--blue-60);\n  --uui-info-70: var(--blue-70);\n  --uui-info-contrast: var(--white);\n  --uui-success-5: var(--green-5);\n  --uui-success-10: var(--green-10);\n  --uui-success-20: var(--green-20);\n  --uui-success-50: var(--green-50);\n  --uui-success-60: var(--green-60);\n  --uui-success-70: var(--green-70);\n  --uui-success-contrast: var(--white);\n  --uui-warning-5: var(--amber-5);\n  --uui-warning-10: var(--amber-10);\n  --uui-warning-20: var(--amber-20);\n  --uui-warning-50: var(--amber-50);\n  --uui-warning-60: var(--amber-60);\n  --uui-warning-70: var(--amber-70);\n  --uui-warning-contrast: var(--gray80);\n  --uui-error-5: var(--red-5);\n  --uui-error-10: var(--red-10);\n  --uui-error-20: var(--red-20);\n  --uui-error-50: var(--red-50);\n  --uui-error-60: var(--red-60);\n  --uui-error-70: var(--red-70);\n  --uui-error-contrast: var(--white);\n  --uui-neutral-0: #FFFFFF;\n  --uui-neutral-5: var(--gray5);\n  --uui-neutral-10: var(--gray10);\n  --uui-neutral-20: var(--gray20);\n  --uui-neutral-30: var(--gray30);\n  --uui-neutral-40: var(--gray40);\n  --uui-neutral-50: var(--gray50);\n  --uui-neutral-60: var(--gray60);\n  --uui-neutral-70: var(--gray70);\n  --uui-neutral-80: var(--gray80);\n  --uui-neutral-90: var(--gray90);\n  --uui-neutral-100: #000000;\n  /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */\n  --uui-app-bg: var(--uui-neutral-10);\n  --uui-overlay: rgba(29, 30, 38, 0.8);\n  --uui-surface-sunken: var(--uui-neutral-5);\n  --uui-surface-main: var(--uui-neutral-0);\n  --uui-surface-higher: var(--uui-neutral-10);\n  --uui-surface-highest: var(--uui-neutral-20);\n  --uui-divider: var(--uui-neutral-40);\n  --uui-divider-light: var(--uui-neutral-30);\n  --uui-text-brand: var(--uui-neutral-90);\n  --uui-text-primary: var(--uui-neutral-80);\n  --uui-text-secondary: var(--uui-neutral-70);\n  --uui-text-tertiary: var(--uui-neutral-60);\n  --uui-text-disabled: var(--uui-neutral-50);\n  --uui-text-info: var(--uui-info-70);\n  --uui-text-warning: var(--uui-warning-70);\n  --uui-text-critical: var(--uui-critical-70);\n  --uui-text-success: var(--uui-success-70);\n  /* not accepted part */\n  /* control specific */\n  --uui-link: var(--blue-50);\n  --uui-link-soft: var(--blue-5);\n  --uui-link-hover: var(--blue-60);\n  --uui-link-visited: #8018A0;\n  --uui-link-visited-hover: #601278;\n  --uui-link-disabled: var(--uui-neutral-50);\n  --uui-icon: var(--uui-neutral-60);\n  --uui-icon-hover: var(--uui-neutral-70);\n  --uui-icon-active: var(--uui-neutral-80);\n  --uui-icon-disabled: var(--uui-neutral-50);\n  --uui-control-bg: var(--uui-neutral-0);\n  --uui-control-bg-hover: var(--uui-neutral-60);\n  --uui-control-bg-disabled: var(--uui-neutral-5);\n  --uui-control-border: var(--uui-neutral-40);\n  --uui-control-border-hover: var(--uui-neutral-60);\n  --uui-control-border-focus: var(--uui-primary-50);\n  --uui-control-border-disabled: var(--uui-neutral-30);\n  --uui-control-placeholder: var(--uui-neutral-50);\n  --uui-control-placeholder-disabled: var(--uui-neutral-50);\n  --uui-control-text: var(--uui-text-primary);\n  --uui-control-text-disabled: var(--uui-text-tertiary);\n  --uui-control-icon: var(--uui-neutral-50);\n  --uui-control-icon-disabled: var(--uui-neutral-50);\n  --uui-outline-focus: #008ACE80;\n  --uui-skeleton: var(--uui-neutral-40);\n  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);\n  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n  --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);\n  --uui-border-radius: 0;\n  /* core variables end */\n  /* ------------------------------------ */\n  /* begin color classes */\n  /* Badge */\n  /* Button */\n  /* IconButton */\n  /* Tooltip */\n  /* CountIndicator */\n  /* Status Indicator */\n  /* FlexRow */\n  /* Tag */\n  /* fonts */\n  /* Typography */\n}\n.uui-theme-promo .uui-color-accent,\n.uui-theme-promo .uui-color-green {\n  --uui-color-5: var(--uui-accent-5);\n  --uui-color-10: var(--uui-accent-10);\n  --uui-color-20: var(--uui-accent-20);\n  --uui-color-50: var(--uui-accent-50);\n  --uui-color-60: var(--uui-accent-60);\n  --uui-color-70: var(--uui-accent-70);\n  --uui-color-contrast: var(--uui-accent-contrast);\n}\n.uui-theme-promo .uui-color-primary,\n.uui-theme-promo .uui-color-blue {\n  --uui-color-5: var(--uui-primary-5);\n  --uui-color-10: var(--uui-primary-10);\n  --uui-color-20: var(--uui-primary-20);\n  --uui-color-50: var(--uui-primary-50);\n  --uui-color-60: var(--uui-primary-60);\n  --uui-color-70: var(--uui-primary-70);\n  --uui-color-contrast: var(--uui-primary-contrast);\n}\n.uui-theme-promo .uui-color-secondary,\n.uui-theme-promo .uui-color-neutral,\n.uui-theme-promo .uui-color-gray {\n  --uui-color-5: var(--uui-secondary-5);\n  --uui-color-10: var(--uui-secondary-10);\n  --uui-color-20: var(--uui-secondary-20);\n  --uui-color-50: var(--uui-secondary-50);\n  --uui-color-60: var(--uui-secondary-60);\n  --uui-color-70: var(--uui-secondary-70);\n  --uui-color-contrast: var(--uui-secondary-contrast);\n}\n.uui-theme-promo .uui-color-critical,\n.uui-theme-promo .uui-color-red {\n  --uui-color-5: var(--uui-critical-5);\n  --uui-color-10: var(--uui-critical-10);\n  --uui-color-20: var(--uui-critical-20);\n  --uui-color-50: var(--uui-critical-50);\n  --uui-color-60: var(--uui-critical-60);\n  --uui-color-70: var(--uui-critical-70);\n  --uui-color-contrast: var(--uui-critical-contrast);\n}\n.uui-theme-promo .uui-color-info {\n  --uui-color-5: var(--uui-info-5);\n  --uui-color-10: var(--uui-info-10);\n  --uui-color-20: var(--uui-info-20);\n  --uui-color-50: var(--uui-info-50);\n  --uui-color-60: var(--uui-info-60);\n  --uui-color-70: var(--uui-info-70);\n  --uui-color-contrast: var(--uui-info-contrast);\n}\n.uui-theme-promo .uui-color-success {\n  --uui-color-5: var(--uui-success-5);\n  --uui-color-10: var(--uui-success-10);\n  --uui-color-20: var(--uui-success-20);\n  --uui-color-50: var(--uui-success-50);\n  --uui-color-60: var(--uui-success-60);\n  --uui-color-70: var(--uui-success-70);\n  --uui-color-contrast: var(--uui-success-contrast);\n}\n.uui-theme-promo .uui-color-warning,\n.uui-theme-promo .uui-color-amber {\n  --uui-color-5: var(--uui-warning-5);\n  --uui-color-10: var(--uui-warning-10);\n  --uui-color-20: var(--uui-warning-20);\n  --uui-color-50: var(--uui-warning-50);\n  --uui-color-60: var(--uui-warning-60);\n  --uui-color-70: var(--uui-warning-70);\n  --uui-color-contrast: var(--uui-warning-contrast);\n}\n.uui-theme-promo .uui-color-error {\n  --uui-color-5: var(--uui-error-5);\n  --uui-color-10: var(--uui-error-10);\n  --uui-color-20: var(--uui-error-20);\n  --uui-color-50: var(--uui-error-50);\n  --uui-color-60: var(--uui-error-60);\n  --uui-color-70: var(--uui-error-70);\n  --uui-color-contrast: var(--uui-error-contrast);\n}\n.uui-theme-promo .uui-color-white {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--white);\n  --uui-color-20: var(--white);\n  --uui-color-50: var(--white);\n  --uui-color-60: var(--gray10);\n  --uui-color-70: var(--gray20);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-gray5 {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--white);\n  --uui-color-20: var(--white);\n  --uui-color-50: var(--gray5);\n  --uui-color-60: var(--gray10);\n  --uui-color-70: var(--gray20);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-link_button.uui-color-contrast,\n.uui-theme-promo .uui-color-gray10 {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--white);\n  --uui-color-20: var(--gray5);\n  --uui-color-50: var(--gray10);\n  --uui-color-60: var(--gray20);\n  --uui-color-70: var(--gray30);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-gray30 {\n  --uui-color-5: var(--gray20);\n  --uui-color-10: var(--gray30);\n  --uui-color-20: var(--gray40);\n  --uui-color-50: var(--gray30);\n  --uui-color-60: var(--gray40);\n  --uui-color-70: var(--gray50);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-gray50 {\n  --uui-color-5: var(--gray5);\n  --uui-color-10: var(--gray10);\n  --uui-color-20: var(--gray20);\n  --uui-color-50: var(--gray50);\n  --uui-color-60: var(--gray60);\n  --uui-color-70: var(--gray70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-button.uui-color-gray50,\n.uui-theme-promo .uui-color-gray60 {\n  --uui-color-5: var(--gray20);\n  --uui-color-10: var(--gray60);\n  --uui-color-20: var(--gray40);\n  --uui-color-50: var(--gray60);\n  --uui-color-60: var(--gray70);\n  --uui-color-70: var(--gray80);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-gray80 {\n  --uui-color-5: var(--white);\n  --uui-color-10: var(--gray10);\n  --uui-color-20: var(--gray20);\n  --uui-color-50: var(--gray80);\n  --uui-color-60: var(--gray80);\n  --uui-color-70: var(--gray80);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-gray90 {\n  --uui-color-5: var(--gray60);\n  --uui-color-10: var(--gray70);\n  --uui-color-20: var(--gray80);\n  --uui-color-50: var(--gray90);\n  --uui-color-60: var(--gray90);\n  --uui-color-70: var(--gray90);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-yellow {\n  --uui-color-5: var(--yellow-5);\n  --uui-color-10: var(--yellow-10);\n  --uui-color-20: var(--yellow-20);\n  --uui-color-50: var(--yellow-50);\n  --uui-color-60: var(--yellow-60);\n  --uui-color-70: var(--yellow-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-orange {\n  --uui-color-5: var(--orange-5);\n  --uui-color-10: var(--orange-10);\n  --uui-color-20: var(--orange-20);\n  --uui-color-50: var(--orange-50);\n  --uui-color-60: var(--orange-60);\n  --uui-color-70: var(--orange-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-fuchsia {\n  --uui-color-5: var(--fuchsia-5);\n  --uui-color-10: var(--fuchsia-10);\n  --uui-color-20: var(--fuchsia-20);\n  --uui-color-50: var(--fuchsia-50);\n  --uui-color-60: var(--fuchsia-60);\n  --uui-color-70: var(--fuchsia-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-purple {\n  --uui-color-5: var(--purple-5);\n  --uui-color-10: var(--purple-10);\n  --uui-color-20: var(--purple-20);\n  --uui-color-50: var(--purple-50);\n  --uui-color-60: var(--purple-60);\n  --uui-color-70: var(--purple-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-violet {\n  --uui-color-5: var(--violet-5);\n  --uui-color-10: var(--violet-10);\n  --uui-color-20: var(--violet-20);\n  --uui-color-50: var(--violet-50);\n  --uui-color-60: var(--violet-60);\n  --uui-color-70: var(--violet-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-cobalt {\n  --uui-color-5: var(--cobalt-5);\n  --uui-color-10: var(--cobalt-10);\n  --uui-color-20: var(--cobalt-20);\n  --uui-color-50: var(--cobalt-50);\n  --uui-color-60: var(--cobalt-60);\n  --uui-color-70: var(--cobalt-70);\n  --uui-color-contrast: var(--white);\n}\n.uui-theme-promo .uui-color-cyan {\n  --uui-color-5: var(--cyan-5);\n  --uui-color-10: var(--cyan-10);\n  --uui-color-20: var(--cyan-20);\n  --uui-color-50: var(--cyan-50);\n  --uui-color-60: var(--cyan-60);\n  --uui-color-70: var(--cyan-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-color-mint {\n  --uui-color-5: var(--mint-5);\n  --uui-color-10: var(--mint-10);\n  --uui-color-20: var(--mint-20);\n  --uui-color-50: var(--mint-50);\n  --uui-color-60: var(--mint-60);\n  --uui-color-70: var(--mint-70);\n  --uui-color-contrast: var(--gray80);\n}\n.uui-theme-promo .uui-badge.uui-color-white.uui-fill-outline {\n  --uui-badge-bg-hover: var(--uui-neutral-10);\n  --uui-badge-border: var(--uui-neutral-30);\n  --uui-badge-border-hover: var(--uui-neutral-30);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-neutral.uui-fill-solid,\n.uui-theme-promo .uui-badge.uui-color-gray30.uui-fill-solid {\n  --uui-badge-bg: var(--uui-neutral-30);\n  --uui-badge-bg-hover: var(--uui-neutral-40);\n  --uui-badge-border: var(--uui-neutral-30);\n  --uui-badge-border-hover: var(--uui-neutral-40);\n  --uui-color-contrast: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-neutral.uui-fill-outline,\n.uui-theme-promo .uui-badge.uui-color-gray30.uui-fill-outline {\n  --uui-badge-bg: var(--uui-neutral-20);\n  --uui-badge-border: var(--uui-neutral-40);\n  --uui-badge-bg-hover: var(--uui-neutral-30);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-gray10.uui-fill-solid {\n  --uui-badge-bg-hover: var(--uui-neutral-20);\n  --uui-badge-border-hover: var(--uui-neutral-20);\n}\n.uui-theme-promo .uui-badge.uui-color-gray10.uui-fill-outline {\n  --uui-badge-border: var(--uui-neutral-30);\n  --uui-badge-border-hover: var(--uui-neutral-30);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-gray60.uui-fill-outline {\n  --uui-badge-border: var(--uui-neutral-60);\n  --uui-badge-border-hover: var(--uui-neutral-60);\n  --uui-badge-caption: var(--uui-neutral-80);\n  --uui-badge-caption-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-badge.uui-color-yellow.uui-fill-outline {\n  --uui-badge-border: var(--yellow-20);\n}\n.uui-theme-promo .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n  --uui-btn-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-button.uui-size-42 .uui-caption, .uui-theme-promo .uui-button.uui-size-48 .uui-caption {\n  font-family: var(--font-museo-sans);\n}\n.uui-theme-promo .uui-icon_button.uui-color-neutral,\n.uui-theme-promo .uui-icon_button.uui-color-gray60 {\n  --uui-icon_btn: var(--uui-neutral-60);\n  --uui-icon_btn-hover: var(--uui-neutral-70);\n  --uui-icon_btn-active: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-icon_button.uui-color-secondary {\n  --uui-icon_btn: var(--uui-neutral-50);\n  --uui-icon_btn-hover: var(--uui-neutral-60);\n  --uui-icon_btn-active: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-tooltip-container.uui-color-white {\n  --uui-tooltip-bg: var(--uui-neutral-0);\n  --uui-tooltip-text: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-tooltip-container.uui-color-red {\n  --uui-tooltip-bg: var(--uui-critical-60);\n}\n.uui-theme-promo .uui-tooltip-container.uui-color-gray {\n  --uui-tooltip-bg: var(--uui-neutral-80);\n  --uui-tooltip-text: var(--uui-neutral-5);\n}\n.uui-theme-promo .uui-count_indicator.uui-color-gray,\n.uui-theme-promo .uui-count_indicator.uui-color-neutral {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n  --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator_dot {\n  background-color: color-mix(in srgb, var(--white) 20%, transparent);\n  border: 1px solid var(--uui-neutral-40);\n}\n.uui-theme-promo .uui-flex-row.uui-color-none {\n  --uui-flex-row-bg: transparent;\n}\n.uui-theme-promo .uui-flex-row.uui-color-white {\n  --uui-flex-row-bg: var(--white);\n}\n.uui-theme-promo .uui-flex-row.uui-color-gray5 {\n  --uui-flex-row-bg: var(--gray5);\n}\n.uui-theme-promo .uui-panel.uui-color-white {\n  --uui-panel-bg: var(--white);\n}\n.uui-theme-promo .uui-panel.uui-color-gray90 {\n  --uui-panel-bg: var(--gray90);\n}\n.uui-theme-promo .uui-tag {\n  --uui-border-radius: 3px;\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-solid {\n  --uui-tag-bg-hover: var(--uui-neutral-10);\n  --uui-tag-border-hover: var(--uui-neutral-10);\n  --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n  --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-outline {\n  --uui-tag-bg-hover: var(--uui-neutral-10);\n  --uui-tag-border: var(--uui-neutral-30);\n  --uui-tag-border-hover: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-white.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-solid {\n  --uui-tag-border-hover: var(--uui-neutral-20);\n  --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n  --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-outline {\n  --uui-tag-bg: var(--uui-neutral-5);\n  --uui-tag-bg-hover: var(--uui-neutral-10);\n  --uui-tag-border: var(--uui-neutral-30);\n  --uui-tag-border-hover: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-gray10.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-solid, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-solid {\n  --uui-tag-bg: var(--uui-neutral-30);\n  --uui-tag-bg-hover: var(--uui-neutral-40);\n  --uui-tag-border: var(--uui-neutral-30);\n  --uui-tag-border-hover: var(--uui-neutral-40);\n  --uui-tag-caption: var(--uui-text-primary);\n  --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-solid .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-0);\n  --uui-count_indicator-border: var(--uui-neutral-0);\n  --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-outline, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-outline {\n  --uui-tag-bg: var(--uui-neutral-20);\n  --uui-tag-bg-hover: var(--uui-neutral-30);\n  --uui-tag-border: var(--uui-neutral-40);\n  --uui-tag-border-hover: var(--uui-neutral-40);\n}\n.uui-theme-promo .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-gray30.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-30);\n  --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-promo .uui-tag.uui-color-gray70.uui-fill-solid {\n  --uui-tag-caption: var(--uui-neutral-0);\n  --uui-tag-fill: var(--uui-neutral-0);\n  --uui-tag-bg: var(--uui-neutral-70);\n  --uui-tag-border: var(--uui-neutral-70);\n  --uui-tag-bg-hover: var(--uui-neutral-80);\n  --uui-tag-border-hover: var(--uui-neutral-80);\n}\n.uui-theme-promo .uui-tag.uui-color-gray70.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n  --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n  --uui-count_indicator-caption: var(--uui-neutral-0);\n}\n.uui-theme-promo .uui-tag.uui-color-gray70.uui-fill-outline {\n  --uui-tag-bg: var(--uui-neutral-20);\n  --uui-tag-bg-hover: var(--uui-neutral-30);\n  --uui-tag-border: var(--uui-neutral-50);\n  --uui-tag-border-hover: var(--uui-neutral-50);\n}\n.uui-theme-promo .uui-tag.uui-color-warning.uui-fill-solid, .uui-theme-promo .uui-tag.uui-color-amber.uui-fill-solid {\n  --uui-tag-caption: var(--uui-text-primary);\n  --uui-tag-fill: var(--uui-neutral-90);\n}\n.uui-theme-promo .uui-tag.uui-color-warning.uui-fill-solid .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-amber.uui-fill-solid .uui-count_indicator {\n  --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n  --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n}\n.uui-theme-promo .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-promo .uui-tag.uui-color-amber.uui-fill-outline .uui-count_indicator {\n  --uui-count_indicator-bg: var(--uui-neutral-0);\n  --uui-count_indicator-border: var(--uui-neutral-40);\n}\n.uui-theme-promo .uui-dropdown-body {\n  --uui-dropdown_container-border-radius: 0;\n}\n.uui-theme-promo .uui-link_button.uui-size-42 :global(.uui-caption), .uui-theme-promo .uui-link_button.uui-size-48 :global(.uui-caption) {\n  font-family: var(--font-museo-sans);\n  text-transform: uppercase;\n}\n.uui-theme-promo .uui-font-sans {\n  --uui-text-font: var(--uui-font);\n  --uui-text-font-weight: 400;\n}\n.uui-theme-promo .uui-font-sans-semibold {\n  --uui-text-font: var(--uui-font);\n  --uui-text-font-weight: 600;\n}\n.uui-theme-promo .uui-font-sans-italic {\n  --uui-text-font: var(--uui-font);\n  --uui-text-font-weight: 400;\n  --uui-text-font-style: italic;\n}\n.uui-theme-promo .uui-font-museo-sans {\n  --uui-text-font: var(--font-museo-sans);\n  --uui-text-font-weight: normal;\n}\n.uui-theme-promo .uui-font-museo-slab {\n  --uui-text-font: var(--font-museo-slab);\n  --uui-text-font-weight: normal;\n}\n.uui-theme-promo .uui-typography h1, .uui-theme-promo .uui-typography h2, .uui-theme-promo .uui-typography h3 {\n  font-family: var(--font-museo-sans);\n}\n.uui-theme-promo .uui-typography h1 {\n  font-size: 36px;\n}\n.uui-theme-promo .uui-typography .hero-header {\n  font-family: var(--font-museo-slab);\n}\n.uui-theme-promo .uui-typography .promo-header:is(h1, h2, h3) {\n  font-family: var(--font-museo-sans);\n}"]}

package/css/theme/theme_vanilla_thunder.css

@@ -309,6 +309,17 @@
 .uui-theme-vanilla_thunder .uui-text-placeholder{
   --uui-text_placeholder-gradient:repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);
 }
+.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-neutral{
+  --uui-tooltip-bg:var(--uui-neutral-0);
+  --uui-tooltip-text:var(--uui-text-primary);
+}
+.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-critical{
+  --uui-tooltip-bg:var(--uui-critical-60);
+}
+.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-inverted{
+  --uui-tooltip-bg:var(--uui-neutral-80);
+  --uui-tooltip-text:var(--uui-neutral-5);
+}
 .uui-theme-vanilla_thunder .uui-tag.uui-color-warning, .uui-theme-vanilla_thunder .uui-tag.uui-color-sun{
   --uui-tag-caption:var(--uui-text-primary);
   --uui-tag-fill:var(--uui-neutral-90);