@eui/styles 21.0.0-alpha.10 → 21.0.0-alpha.12

package/dist/base/01-base/functions/_other.functions.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @function v($var, $fallback: null) {
     @if ($fallback) {
@@ -10,20 +11,20 @@
 @function map-deep-get($map, $keys...) {
     @each $key in $keys {
         @debug #{$map};
-        $map: map-get($map, $key);
+        $map: map.get($map, $key);
     }
     @return $map;
 }
 @function mapReverseValues($map) {
-    $keys: map-keys($map);
+    $keys: map.keys($map);
     $map-reversed: ();
 
     @for $i from length($keys) through 1 {
         $currentPos: calc(length($keys) - $i + 1);
 
-        $map-reversed: map-merge(
+        $map-reversed: map.merge(
             $map-reversed,
-            (nth($keys, $currentPos): map-get($map, nth($keys, $i)))
+            (nth($keys, $currentPos): map.get($map, nth($keys, $i)))
         );
     }
     @return $map-reversed;

package/dist/base/01-base/mixins/_eui-input.scss

@@ -44,7 +44,7 @@
 
     &[disabled]:not([readonly]),
     &--disabled:not([readonly]) {
-        background-color: var(--eui-c-secondary-surface-light) !important;
+        background-color: var(--eui-c-disabled-bg) !important;
         border: 1px solid var(--eui-c-secondary-border-lighter);
         color: var(--eui-c-text-light);
         @if $element == textarea {

package/dist/base/02-tokens/maps-dark-theme.scss

@@ -1,16 +1,17 @@
+@use "sass:map";
 @use '../01-base' as base;
 @use './maps' as maps;
 
 // COLORS
 
 $color-map: (
-    br: base.mapReverseValues(map-get(maps.$color-map, 'br')),
-    pr: base.mapReverseValues(map-get(maps.$color-map, 'pr')),
-    gr: base.mapReverseValues(map-get(maps.$color-map, 'gr')),
-    grn: base.mapReverseValues(map-get(maps.$color-map, 'grn')),      
-    cta: base.mapReverseValues(map-get(maps.$color-map, 'cta')),
-    in: base.mapReverseValues(map-get(maps.$color-map, 'in')),
-    su: base.mapReverseValues(map-get(maps.$color-map, 'su')),
-    wa: base.mapReverseValues(map-get(maps.$color-map, 'wa')),
-    da: base.mapReverseValues(map-get(maps.$color-map, 'da'))
+    br: base.mapReverseValues(map.get(maps.$color-map, 'br')),
+    pr: base.mapReverseValues(map.get(maps.$color-map, 'pr')),
+    gr: base.mapReverseValues(map.get(maps.$color-map, 'gr')),
+    grn: base.mapReverseValues(map.get(maps.$color-map, 'grn')),      
+    cta: base.mapReverseValues(map.get(maps.$color-map, 'cta')),
+    in: base.mapReverseValues(map.get(maps.$color-map, 'in')),
+    su: base.mapReverseValues(map.get(maps.$color-map, 'su')),
+    wa: base.mapReverseValues(map.get(maps.$color-map, 'wa')),
+    da: base.mapReverseValues(map.get(maps.$color-map, 'da'))
 );

package/dist/base/02-tokens/maps.scss

@@ -268,40 +268,40 @@ $ecl-colors: (
 
 $color-map: (
     br: (
-        950: map-get($ecl-colors, 'grey-950'),
-        900: map-get($ecl-colors, 'grey-900'),
-        800: map-get($ecl-colors, 'grey-800'),
-        700: map-get($ecl-colors, 'grey-700')
+        950: map.get($ecl-colors, 'grey-950'),
+        900: map.get($ecl-colors, 'grey-900'),
+        800: map.get($ecl-colors, 'grey-800'),
+        700: map.get($ecl-colors, 'grey-700')
     ),
     pr: (
-        950: map-get($ecl-colors, 'primary-950'),
-        900: map-get($ecl-colors, 'primary-900'),
-        800: map-get($ecl-colors, 'primary-800'),
-        700: map-get($ecl-colors, 'primary-700'),
-        600: map-get($ecl-colors, 'primary-600'),
-        500: map-get($ecl-colors, 'primary-500'),
-        400: map-get($ecl-colors, 'primary-400'),
-        300: map-get($ecl-colors, 'primary-300'),
-        200: map-get($ecl-colors, 'primary-200'),
-        100: map-get($ecl-colors, 'primary-100'),
-        75: map-get($ecl-colors, 'primary-75'),
-        50: map-get($ecl-colors, 'primary-50'),
-        25: map-get($ecl-colors, 'primary-25')
+        950: map.get($ecl-colors, 'primary-950'),
+        900: map.get($ecl-colors, 'primary-900'),
+        800: map.get($ecl-colors, 'primary-800'),
+        700: map.get($ecl-colors, 'primary-700'),
+        600: map.get($ecl-colors, 'primary-600'),
+        500: map.get($ecl-colors, 'primary-500'),
+        400: map.get($ecl-colors, 'primary-400'),
+        300: map.get($ecl-colors, 'primary-300'),
+        200: map.get($ecl-colors, 'primary-200'),
+        100: map.get($ecl-colors, 'primary-100'),
+        75: map.get($ecl-colors, 'primary-75'),
+        50: map.get($ecl-colors, 'primary-50'),
+        25: map.get($ecl-colors, 'primary-25')
     ),
     gr: (
-        950: map-get($ecl-colors, 'grey-950'),
-        900: map-get($ecl-colors, 'grey-900'),
-        800: map-get($ecl-colors, 'grey-800'),
-        700: map-get($ecl-colors, 'grey-700'),
-        600: map-get($ecl-colors, 'grey-600'),
-        500: map-get($ecl-colors, 'grey-500'),
-        400: map-get($ecl-colors, 'grey-400'),
-        300: map-get($ecl-colors, 'grey-300'),
-        200: map-get($ecl-colors, 'grey-200'),
-        100: map-get($ecl-colors, 'grey-100'),
-        75: map-get($ecl-colors, 'grey-75'),
-        50: map-get($ecl-colors, 'grey-50'),
-        25: map-get($ecl-colors, 'grey-25')        
+        950: map.get($ecl-colors, 'grey-950'),
+        900: map.get($ecl-colors, 'grey-900'),
+        800: map.get($ecl-colors, 'grey-800'),
+        700: map.get($ecl-colors, 'grey-700'),
+        600: map.get($ecl-colors, 'grey-600'),
+        500: map.get($ecl-colors, 'grey-500'),
+        400: map.get($ecl-colors, 'grey-400'),
+        300: map.get($ecl-colors, 'grey-300'),
+        200: map.get($ecl-colors, 'grey-200'),
+        100: map.get($ecl-colors, 'grey-100'),
+        75: map.get($ecl-colors, 'grey-75'),
+        50: map.get($ecl-colors, 'grey-50'),
+        25: map.get($ecl-colors, 'grey-25')        
     ),
     grn: (
         950: #171717,
@@ -319,79 +319,79 @@ $color-map: (
         25: #fbfbfb 
     ),
     in: (
-        950: map-get($ecl-colors, 'info-950'),
-        900: map-get($ecl-colors, 'info-900'),
-        800: map-get($ecl-colors, 'info-800'),
-        700: map-get($ecl-colors, 'info-700'),
-        600: map-get($ecl-colors, 'info-600'),
-        500: map-get($ecl-colors, 'info-500'),
-        400: map-get($ecl-colors, 'info-400'),
-        300: map-get($ecl-colors, 'info-300'),
-        200: map-get($ecl-colors, 'info-200'),
-        100: map-get($ecl-colors, 'info-100'),
-        75: map-get($ecl-colors, 'info-75'),
-        50: map-get($ecl-colors, 'info-50'),
-        25: map-get($ecl-colors, 'info-25')         
+        950: map.get($ecl-colors, 'info-950'),
+        900: map.get($ecl-colors, 'info-900'),
+        800: map.get($ecl-colors, 'info-800'),
+        700: map.get($ecl-colors, 'info-700'),
+        600: map.get($ecl-colors, 'info-600'),
+        500: map.get($ecl-colors, 'info-500'),
+        400: map.get($ecl-colors, 'info-400'),
+        300: map.get($ecl-colors, 'info-300'),
+        200: map.get($ecl-colors, 'info-200'),
+        100: map.get($ecl-colors, 'info-100'),
+        75: map.get($ecl-colors, 'info-75'),
+        50: map.get($ecl-colors, 'info-50'),
+        25: map.get($ecl-colors, 'info-25')         
     ),
     su: (
-        950: map-get($ecl-colors, 'success-950'),
-        900: map-get($ecl-colors, 'success-900'),
-        800: map-get($ecl-colors, 'success-800'),
-        700: map-get($ecl-colors, 'success-700'),
-        600: map-get($ecl-colors, 'success-600'),
-        500: map-get($ecl-colors, 'success-500'),
-        400: map-get($ecl-colors, 'success-400'),
-        300: map-get($ecl-colors, 'success-300'),
-        200: map-get($ecl-colors, 'success-200'),
-        100: map-get($ecl-colors, 'success-100'),
-        75: map-get($ecl-colors, 'success-75'),
-        50: map-get($ecl-colors, 'success-50'),
-        25: map-get($ecl-colors, 'success-25')         
+        950: map.get($ecl-colors, 'success-950'),
+        900: map.get($ecl-colors, 'success-900'),
+        800: map.get($ecl-colors, 'success-800'),
+        700: map.get($ecl-colors, 'success-700'),
+        600: map.get($ecl-colors, 'success-600'),
+        500: map.get($ecl-colors, 'success-500'),
+        400: map.get($ecl-colors, 'success-400'),
+        300: map.get($ecl-colors, 'success-300'),
+        200: map.get($ecl-colors, 'success-200'),
+        100: map.get($ecl-colors, 'success-100'),
+        75: map.get($ecl-colors, 'success-75'),
+        50: map.get($ecl-colors, 'success-50'),
+        25: map.get($ecl-colors, 'success-25')         
     ),
     wa: (
-        950: map-get($ecl-colors, 'warning-950'),
-        900: map-get($ecl-colors, 'warning-900'),
-        800: map-get($ecl-colors, 'warning-800'),
-        700: map-get($ecl-colors, 'warning-700'),
-        600: map-get($ecl-colors, 'warning-600'),
-        500: map-get($ecl-colors, 'warning-500'),
-        400: map-get($ecl-colors, 'warning-400'),
-        300: map-get($ecl-colors, 'warning-300'),
-        200: map-get($ecl-colors, 'warning-200'),
-        100: map-get($ecl-colors, 'warning-100'),
-        75: map-get($ecl-colors, 'warning-75'),
-        50: map-get($ecl-colors, 'warning-50'),
-        25: map-get($ecl-colors, 'warning-25')          
+        950: map.get($ecl-colors, 'warning-950'),
+        900: map.get($ecl-colors, 'warning-900'),
+        800: map.get($ecl-colors, 'warning-800'),
+        700: map.get($ecl-colors, 'warning-700'),
+        600: map.get($ecl-colors, 'warning-600'),
+        500: map.get($ecl-colors, 'warning-500'),
+        400: map.get($ecl-colors, 'warning-400'),
+        300: map.get($ecl-colors, 'warning-300'),
+        200: map.get($ecl-colors, 'warning-200'),
+        100: map.get($ecl-colors, 'warning-100'),
+        75: map.get($ecl-colors, 'warning-75'),
+        50: map.get($ecl-colors, 'warning-50'),
+        25: map.get($ecl-colors, 'warning-25')          
     ),
     da: (
-        950: map-get($ecl-colors, 'error-950'),
-        900: map-get($ecl-colors, 'error-900'),
-        800: map-get($ecl-colors, 'error-800'),
-        700: map-get($ecl-colors, 'error-700'),
-        600: map-get($ecl-colors, 'error-600'),
-        500: map-get($ecl-colors, 'error-500'),
-        400: map-get($ecl-colors, 'error-400'),
-        300: map-get($ecl-colors, 'error-300'),
-        200: map-get($ecl-colors, 'error-200'),
-        100: map-get($ecl-colors, 'error-100'),
-        75: map-get($ecl-colors, 'error-75'),
-        50: map-get($ecl-colors, 'error-50'),
-        25: map-get($ecl-colors, 'error-25')         
+        950: map.get($ecl-colors, 'error-950'),
+        900: map.get($ecl-colors, 'error-900'),
+        800: map.get($ecl-colors, 'error-800'),
+        700: map.get($ecl-colors, 'error-700'),
+        600: map.get($ecl-colors, 'error-600'),
+        500: map.get($ecl-colors, 'error-500'),
+        400: map.get($ecl-colors, 'error-400'),
+        300: map.get($ecl-colors, 'error-300'),
+        200: map.get($ecl-colors, 'error-200'),
+        100: map.get($ecl-colors, 'error-100'),
+        75: map.get($ecl-colors, 'error-75'),
+        50: map.get($ecl-colors, 'error-50'),
+        25: map.get($ecl-colors, 'error-25')         
     ),
     cta: (
-        950: map-get($ecl-colors, 'secondary-950'),
-        900: map-get($ecl-colors, 'secondary-900'),
-        800: map-get($ecl-colors, 'secondary-800'),
-        700: map-get($ecl-colors, 'secondary-700'),
-        600: map-get($ecl-colors, 'secondary-600'),
-        500: map-get($ecl-colors, 'secondary-500'),
-        400: map-get($ecl-colors, 'secondary-400'),
-        300: map-get($ecl-colors, 'secondary-300'),
-        200: map-get($ecl-colors, 'secondary-200'),
-        100: map-get($ecl-colors, 'secondary-100'),
-        75: map-get($ecl-colors, 'secondary-75'),
-        50: map-get($ecl-colors, 'secondary-50'),
-        25: map-get($ecl-colors, 'secondary-25')          
+        950: map.get($ecl-colors, 'secondary-950'),
+        900: map.get($ecl-colors, 'secondary-900'),
+        800: map.get($ecl-colors, 'secondary-800'),
+        700: map.get($ecl-colors, 'secondary-700'),
+        600: map.get($ecl-colors, 'secondary-600'),
+        500: map.get($ecl-colors, 'secondary-500'),
+        400: map.get($ecl-colors, 'secondary-400'),
+        300: map.get($ecl-colors, 'secondary-300'),
+        200: map.get($ecl-colors, 'secondary-200'),
+        100: map.get($ecl-colors, 'secondary-100'),
+        75: map.get($ecl-colors, 'secondary-75'),
+        50: map.get($ecl-colors, 'secondary-50'),
+        25: map.get($ecl-colors, 'secondary-25')          
     )
 );
 
@@ -402,23 +402,33 @@ $color-state-map: (
         base: 'br-900',
         default: 'br-900',
         lighter: 'br-700',
+        lighter-contrast: 'br-700-contrast',
         light: 'br-800',
+        light-contrast: 'br-800-contrast',
         dark: 'br-950',
+        dark-contrast: 'br-950-contrast',
         darker: 'br-950',
+        darker-contrast: 'br-950-contrast',
     ),
     primary: (
         base: 'pr-600', 
         default: 'pr-700',
         lighter: 'pr-500',
+        lighter-contrast: 'pr-500-contrast',
         light: 'pr-600',
+        light-contrast: 'pr-600-contrast',
         dark: 'pr-900',
+        dark-contrast: 'pr-900-contrast',
         darker: 'pr-950',
+        darker-contrast: 'pr-950-contrast',
         on-surface-light: 'pr-900',
         surface-lighter: 'pr-50',
+        surface-lighter-contrast: 'pr-50',
         surface-light: 'pr-75',
         surface-light-contrast: 'pr-75-contrast',
         surface-light-hover: 'pr-200',
         surface-medium: 'pr-200',
+        surface-medium-contrast: 'pr-200-contrast',
         on-surface-medium: 'pr-950', 
         border: 'pr-500',
         border-light: 'pr-300',
@@ -432,15 +442,21 @@ $color-state-map: (
         base: 'gr-500',
         default: 'gr-800',
         lighter: 'gr-600',
+        lighter-contrast: 'gr-600-contrast',
         light: 'gr-700',
+        light-contrast: 'gr-700-contrast',
         dark: 'gr-900',         
+        dark-contrast: 'gr-900-contrast',         
         darker: 'gr-950',         
+        darker-contrast: 'gr-950-contrast',         
         on-surface-light: 'gr-900',
         surface-lighter: 'gr-50',
+        surface-lighter-contrast: 'gr-50-contrast',
         surface-light: 'gr-75',
         surface-light-contrast: 'gr-75-contrast',
         surface-light-hover: 'gr-75',
         surface-medium: 'gr-100',
+        surface-medium-contrast: 'gr-100-contrast',
         on-surface-medium: 'gr-900',
         border: 'gr-500',
         border-light: 'gr-500',
@@ -454,15 +470,21 @@ $color-state-map: (
         base: 'grn-500',
         default: 'grn-800',
         lighter: 'grn-600',
+        lighter-contrast: 'grn-600-contrast',
         light: 'grn-700',
+        light-contrast: 'grn-700-contrast',
         dark: 'grn-900',         
+        dark-contrast: 'grn-900-contrast',         
         darker: 'grn-950',         
+        darker-contrast: 'grn-950-contrast',         
         on-surface-light: 'grn-900',
         surface-lighter: 'grn-25',
+        surface-lighter-contrast: 'grn-25-contrast',
         surface-light: 'grn-50',
         surface-light-contrast: 'grn-50-contrast',
         surface-light-hover: 'grn-75',
         surface-medium: 'grn-100',
+        surface-medium-contrast: 'grn-100-contrast',
         on-surface-medium: 'grn-900',
         border: 'grn-500',
         border-light: 'grn-500',
@@ -476,15 +498,21 @@ $color-state-map: (
         base: 'cta-400',
         default: 'cta-700',
         lighter: 'cta-400',
+        lighter-contrast: 'cta-400-contrast',
         light: 'cta-500',
+        light-contrast: 'cta-500-contrast',
         dark: 'cta-800',
+        dark-contrast: 'cta-800-contrast',
         darker: 'cta-900',
+        darker-contrast: 'cta-900-contrast',
         on-surface-light: 'cta-700',
         surface-lighter: 'cta-25',        
+        surface-lighter-contrast: 'cta-25-contrast',        
         surface-light: 'cta-25',
         surface-light-contrast: 'cta-25-contrast',
         surface-light-hover: 'cta-75',
         surface-medium: 'cta-75',
+        surface-medium-contrast: 'cta-75-contrast',
         on-surface-medium: 'cta-800',
         border: 'cta-300',
         border-light: 'cta-100',
@@ -498,15 +526,21 @@ $color-state-map: (
         base: 'in-500',
         default: 'in-600',
         lighter: 'in-400',
+        lighter-contrast: 'in-400-contrast',
         light: 'in-500',
+        light-contrast: 'in-500-contrast',
         dark: 'in-800',
+        dark-contrast: 'in-800-contrast',
         darker: 'in-900',
+        darker-contrast: 'in-900-contrast',
         on-surface-light: 'in-600',
         surface-lighter: 'in-25',
+        surface-lighter-contrast: 'in-25-contrast',
         surface-light: 'in-50',
         surface-light-contrast: 'in-50-contrast',
         surface-light-hover: 'in-100',
         surface-medium: 'in-100',
+        surface-medium-contrast: 'in-100-contrast',
         on-surface-medium: 'in-160',
         border: 'in-400',
         border-light: 'in-200',
@@ -520,15 +554,21 @@ $color-state-map: (
         base: 'su-700',
         default: 'su-950',
         lighter: 'su-700',
+        lighter-contrast: 'su-700-contrast',
         light: 'su-800',
+        light-contrast: 'su-800-contrast',
         dark: 'su-900',
+        dark-contrast: 'su-900-contrast',
         darker: 'su-950',
+        darker-contrast: 'su-950-contrast',
         on-surface-light: 'su-950',
         surface-lighter: 'su-50',
+        surface-lighter-contrast: 'su-50-contrast',
         surface-light: 'su-100',
         surface-light-contrast: 'su-100-contrast',
         surface-light-hover: 'su-300',
         surface-medium: 'su-300',
+        surface-medium-contrast: 'su-300-contrast',
         on-surface-medium: 'su-950',
         border: 'su-600',
         border-light: 'su-400',
@@ -542,15 +582,21 @@ $color-state-map: (
         base: 'wa-500',
         default: 'wa-800',
         lighter: 'wa-500',
+        lighter-contrast: 'wa-500-contrast',
         light: 'wa-600',
+        light-contrast: 'wa-600-contrast',
         dark: 'wa-900',
+        dark-contrast: 'wa-900-contrast',
         darker: 'wa-950',
+        darker-contrast: 'wa-950-contrast',
         on-surface-light: 'wa-140',
         surface-lighter: 'wa-25',
+        surface-lighter-contrast: 'wa-25-contrast',
         surface-light: 'wa-50',
         surface-light-contrast: 'wa-50-contrast',
         surface-light-hover: 'wa-100',
         surface-medium: 'wa-100',
+        surface-medium-contrast: 'wa-100-contrast',
         on-surface-medium: 'wa-900',
         border: 'wa-400',
         border-light: 'wa-200',
@@ -564,15 +610,21 @@ $color-state-map: (
         base: 'da-600',
         default: 'da-600',
         lighter: 'da-400',
+        lighter-contrast: 'da-400-contrast',
         light: 'da-500',
+        light-contrast: 'da-500-contrast',
         dark: 'da-700',
+        dark-contrast: 'da-700-contrast',
         darker: 'da-800',
+        darker-contrast: 'da-800-contrast',
         on-surface-light: 'da-700',
         surface-lighter: 'da-50',
+        surface-lighter-contrast: 'da-50-contrast',
         surface-light: 'da-75',
         surface-light-contrast: 'da-75-contrast',
         surface-light-hover: 'da-200',
         surface-medium: 'da-200',
+        surface-medium-contrast: 'da-200-contrast',
         on-surface-medium: 'da-900',
         border: 'da-500',
         border-light: 'da-300',
@@ -597,11 +649,11 @@ $ecl-shadow: (
 
 $box-shadow-map: (
     0: none,
-    1: map-get($ecl-shadow, 1),
-    2: map-get($ecl-shadow, 2),
-    3: map-get($ecl-shadow, 5),
-    4: map-get($ecl-shadow, 4),
-    5: map-get($ecl-shadow, 5)
+    1: map.get($ecl-shadow, 1),
+    2: map.get($ecl-shadow, 2),
+    3: map.get($ecl-shadow, 5),
+    4: map.get($ecl-shadow, 4),
+    5: map.get($ecl-shadow, 5)
 );
 
 
@@ -612,15 +664,6 @@ $font-size-list: (
     '2xs-compact', 'xs-compact', 's-compact', 'm-compact', 'l-compact', 'xl-compact', '2xl-compact', '3xl-compact', '4xl-compact', '5xl-compact', '6xl-compact'
 );
 
-
-
-$font-weight-map: (
-    regular: 400,
-    medium: 400,
-    semi-bold: 700,
-    bold: 700
-);
-
 $font-line-height-map: (
     2xs: 1rem,
     xs: 1.25rem,

package/dist/base/03-vars/vars.scss

@@ -66,7 +66,7 @@
     --eui-c-active-bg-alt: var(--eui-bc-pr-300);
 
     --eui-c-disabled: var(--eui-bc-gr-400);
-    --eui-c-disabled-bg: var(--eui-bc-gr-200);
+    --eui-c-disabled-bg: var(--eui-bc-gr-50);
     --eui-c-readonly: var(--eui-bc-gr-500);
 
     --eui-c-link: var(--eui-bc-pr-600);

package/dist/base/05-assets/flags/_icons-generics.scss

@@ -20,9 +20,9 @@ $ratio-4x3: 1.33333333;
     &--rounded {
         background-size: cover !important;
         border-radius: 50%;
-        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
-        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
-        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
+        height: var(--eui-s-xl);    // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        min-width: var(--eui-s-xl); // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        width: var(--eui-s-xl) !important;  // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
     }
 
     &-squared {
@@ -40,8 +40,8 @@ $ratio-4x3: 1.33333333;
         }
 
         &.eui-flag-icon-2x {
-            height: calc(1 * #{var(--eui-s-l)});
-            width: calc(1 * #{var(--eui-s-l)}) !important;
+            height: calc(1.375 * #{var(--eui-s-l)});
+            width: calc(1.375 * #{var(--eui-s-l)}) !important;
         }
 
         &.eui-flag-icon-3x {