@use 'sass:map';
@use 'sass:color';
@use '../01-base/' as base;

// BORDER RADIUS

$ecl-border-radius: ( // v5.alpha.16
    'xs': 2px,
    's': 4px,
    'm': 8px,
    'l': 12px,
);

$border-radius-map: (
    none: 0,
    s: 2px,
    m: 4px,
    l: 6px,
    xl: 8px,
    max: 999px
);


// BORDER WIDTH

$border-width-map: (
    none: 0,
    xs: 1px,
    s: 2px,
    m: 4px
);


// BREAKPOINT

$breakpoint-map: (
    xs: 0,
    sm: 480px,
    md: 768px,
    lg: 996px,
    xl: 1140px,
    xxl: 1440px,
    fhd: 1920px,
    2k: 2560px,
    4k: 3840px
);

// naming
$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 'sm') - 1) !default;
$s: base.new-breakpoint(min-width map.get($breakpoint-map, 'sm') max-width map.get($breakpoint-map, 'md') - 1) !default;
$m: base.new-breakpoint(min-width map.get($breakpoint-map, 'md') max-width map.get($breakpoint-map, 'lg') - 1) !default;
$l: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg') max-width map.get($breakpoint-map, 'xl') - 1) !default;
$xl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xl') max-width map.get($breakpoint-map, 'xxl') - 1) !default;
$xxl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xxl') max-width map.get($breakpoint-map, 'fhd') - 1) !default;
$fhd: base.new-breakpoint(min-width map.get($breakpoint-map, 'fhd') max-width map.get($breakpoint-map, '2k') - 1) !default;

// human naming
$eui-bkp-mobile-xs: $xs !default;
$eui-bkp-mobile-s: $s !default;
$eui-bkp-mobile: base.new-breakpoint(max-width map.get($breakpoint-map, 'md') - 1) !default;
$eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')) !default;
$eui-bkp-tablet: $m !default;
$eui-bkp-tablet-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
$eui-bkp-desktop-down: base.new-breakpoint(max-width map.get($breakpoint-map, 'lg') - 1) !default;
$eui-bkp-desktop: base.new-breakpoint(min-width map.get($breakpoint-map, 'xl')) !default;
$eui-bkp-desktop-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
$eui-bkp-desktop-wide: $xxl !default;
$eui-bkp-desktop-fhd: $fhd !default;


// ICON SIZE

$icon-size-map: (
    2xs: 0.75rem,
    xs: 1rem,
    s: 1.25rem,
    m: 1.5rem,
    l: 2rem,
    xl: 2.5rem,
    2xl: 3rem,
    3xl: 3.5rem,
    4xl: 4rem,
    fluid: 1em
);


// OPACITY

$opacity-map: (
    none: 0,
    25: 0.25,
    50: 0.5,
    75: 0.75,
    100: 1
);


// SPACING

$spacing-map: (
    none: 0, 
    5xs: 0.0625rem,  // 4xs - 1px
    4xs: 0.125rem,   // 3xs - 2px
    3xs: 0.25rem,    // 2xs - 4px
    2xs: 0.375rem,   //     - 6px   
    xs: 0.5rem,      // ==  - 8px
    s: 0.75rem,      // ==  - 12px
    m: 1rem,         // ==  - 16px
    l: 1.25rem,      // ==  - 20px
    xl: 1.5rem,      // ==  - 24px
    2xl: 1.75rem,    //     - 28px
    3xl: 2rem,       // 2xl - 32px
    4xl: 2.25rem,    //     - 36px
    5xl: 2.5rem,     // 3xl - 40px
    6xl: 3rem,       // 4xl - 48px
    7xl: 3.5rem,     // 5xl - 56px
    8xl: 4rem,       // 6xl - 64px
    9xl: 4.5rem,     //     - 72px
    10xl: 5rem,      // 7xl - 80px
);


// Z-INDEX

$z-index-map: (
    auto: auto,
    zero: 0,
    root: 1,
    input-maxlength: 2,
    clearable-icon: 3,
    breadcrumb: 9,
    header: 10,
    top-message: 12,
    nav: 15,
    loading-indicator: 20,
    cdk-overlay-pane: 999,
    logo: 1000,
    sticky: 1040,
    sidebar: 1044,
    overlay: 1045,
    btn-floating: 1046,
    highlighted: 1047,
    footer-action-bar: 1048,
    modal-backdrop: 1049,
    modal: 1050,
    menu: 1060,
    tooltip: 1070,
    max: 9999,
    cdk-overlay-container: 10000,
    block-document: 10010,
    growl-message: 99999
);



// COLORS

$ecl-colors: (
  'primary-25': #f7f9ff,
  'primary-50': #f2f6ff,
  'primary-75': #eef2ff,
  'primary-100': #e6edff,
  'primary-200': #d9e3ff,
  'primary-300': #b0c6ff,
  'primary-400': #8cacff,
  'primary-500': #5987ff,
  'primary-600': #0046ff,
  'primary-700': #0035bf,
  'primary-800': #002a99,
  'primary-900': #001f73,
  'primary-950': #001959,

  'secondary-25': #fffcf7,
  'secondary-50': #fff5e5,
  'secondary-75': #ffebcc,
  'secondary-100': #ffe1b4,
  'secondary-200': #ffd392,
  'secondary-300': #ffcb7d,
  'secondary-400': #ffbe5c,
  'secondary-500': #fea439,
  'secondary-600': #fc8713,
  'secondary-700': #ed6c09,
  'secondary-800': #c55109,
  'secondary-900': #9e4107,
  'secondary-950': #763105,

  'grey-25': #fafafb,
  'grey-50': #f6f6f8,
  'grey-75': #ededf0,
  'grey-100': #e1e1e7,
  'grey-200': #d4d4dc,
  'grey-300': #b9b9c5,
  'grey-400': #a0a0b1,
  'grey-500': #84849b,
  'grey-600': #696984,
  'grey-700': #505070,
  'grey-800': #353559,
  'grey-900': #1c1c45,
  'grey-950': #00002e,

  // Status
  'info-25': #f9fbfd,
  'info-50': #f5f7fb,
  'info-75': #ebeff7,
  'info-100': #dee4f2,
  'info-200': #bfcce6,
  'info-300': #a3b6da,
  'info-400': #859dce,
  'info-500': #6685c2,
  'info-600': #3b62b0,
  'info-700': #1c49a4,
  'info-800': #039,
  'info-900': #00297a,
  'info-950': #001f5c,

  'success-25': #f9fefc,
  'success-50': #edfbf6,
  'success-75': #e3f9f0,
  'success-100': #daf6eb,
  'success-200': #b2edd6,
  'success-300': #8fe5c4,
  'success-400': #5ddaa9,
  'success-500': #05c67b,
  'success-600': #05b26f,
  'success-700': #049e62,
  'success-800': #037e4e,
  'success-900': #025f3b,
  'success-950': #02472c,

  'error-25': #fefafa,
  'error-50': #fdefef,
  'error-75': #fce9ea,
  'error-100': #f5bbbe,
  'error-200': #f09a9e,
  'error-300': #ea6c72,
  'error-400': #e54f57,
  'error-500': #df232d,
  'error-600': #cb2029,
  'error-700': #9e1920,
  'error-800': #7b1319,
  'error-900': #5a0e12,
  'error-950': #1f0506,

  'warning-25': #fffaf5,
  'warning-50': #fff3e8,
  'warning-75': #ffeddc,
  'warning-100': #ffdbba,
  'warning-200': #ffc998,
  'warning-300': #ffb16a,
  'warning-400': #ffa14d,
  'warning-500': #ff8a20,
  'warning-600': #e87e1d,
  'warning-700': #ba6517,
  'warning-800': #8b4c11,
  'warning-900': #68390d,
  'warning-950': #512c0a,
  
  // Priority colors
  'blue-50': #e6edff,
  'blue-100': #d9e3ff,
  'blue-200': #b0c6ff,
  'blue-300': #8cacff,
  'blue-400': #5987ff,
  'blue-500': #0046ff,
  'blue-600': #003fe6,
  'blue-700': #0038cc,
  'blue-800': #0035bf,
  'blue-900': #002a99,

  'blue-navy-50': #f5f5fa,
  'blue-navy-100': #f0f0f8,
  'blue-navy-200': #d9d9ec,
  'blue-navy-300': #bfbfe0,
  'blue-navy-400': #a0a0d1,
  'blue-navy-500': #8c8cc7,
  'blue-navy-600': #4545a4,
  'blue-navy-700': #000083,
  'blue-navy-800': #000069,
  'blue-navy-900': #00002e,

  'blue-electric-50': #e6f8fd,
  'blue-electric-100': #d9f5fb,
  'blue-electric-200': #b1eaf7,
  'blue-electric-300': #5bd3ef,
  'blue-electric-400': #03bbe6,
  'blue-electric-500': #03a8cf,
  'blue-electric-600': #028cad,
  'blue-electric-700': #02708a,
  'blue-electric-800': #015467,
  'blue-electric-900': #014959,

  'green-50': #e6f9f2,
  'green-100': #daf6eb,
  'green-200': #b2edd6,
  'green-300': #8fe5c4,
  'green-400': #5ddaa9,
  'green-500': #05c67b,
  'green-600': #05b26f,
  'green-700': #049e62,
  'green-800': #04955c,
  'green-900': #03774a,

  'green-dark-50': #e6f0f0,
  'green-dark-100': #d9e8e8,
  'green-dark-200': #b0d0d0,
  'green-dark-300': #8cbaba,
  'green-dark-400': #599c9c,
  'green-dark-500': #066,
  'green-dark-600': #005c5c,
  'green-dark-700': #005252,
  'green-dark-800': #004d4d,
  'green-dark-900': #003d3d,

  'orange-50': #fff3e9,
  'orange-100': #ffdbba,
  'orange-200': #ffc998,
  'orange-300': #ffb16a,
  'orange-400': #ffa14d,
  'orange-500': #ff8a20,
  'orange-600': #e87e1d,
  'orange-700': #b56217,
  'orange-800': #8c4c12,
  'orange-900': #6b3a0d,

  'purple-50': #f4effb,
  'purple-100': #ddcdf3,
  'purple-200': #ccb5ee,
  'purple-300': #b594e6,
  'purple-400': #a67fe1,
  'purple-500': #905fd9,
  'purple-600': #8356c5,
  'purple-700': #66439a,
  'purple-800': #4f3477,
  'purple-900': #3c285b,

  // Supplementary colors
  'blue-ocean-50': #e8f8f6,
  'blue-ocean-100': #dcf5f2,
  'blue-ocean-200': #b7eae4,
  'blue-ocean-300': #97e0d8,
  'blue-ocean-400': #69d2c6,
  'blue-ocean-500': #18baa8,
  'blue-ocean-600': #16a797,
  'blue-ocean-700': #139586,
  'blue-ocean-800': #128c7e,
  'blue-ocean-900': #0e7065,

  'green-lemon-50': #fafcee,
  'green-lemon-100': #f7fbe5,
  'green-lemon-200': #eff6c9,
  'green-lemon-300': #e8f2b0,
  'green-lemon-400': #ddec8d,
  'green-lemon-500': #cbe250,
  'green-lemon-600': #b7cb48,
  'green-lemon-700': #a2b540,
  'green-lemon-800': #98aa3c,
  'green-lemon-900': #7a8830,

  'green-pine-50': #eff3f3,
  'green-pine-100': #dae2e4,
  'green-pine-200': #ced8db,
  'green-pine-300': #b6c6ca,
  'green-pine-400': #94abb1,
  'green-pine-500': #809ba2,
  'green-pine-600': #445c63,
  'green-pine-700': #0a3f4d,
  'green-pine-800': #08323e,
  'green-pine-900': #082f3a,

  'red-crayola-50': #fcebee,
  'red-crayola-100': #f6c1ca,
  'red-crayola-200': #f2a3b1,
  'red-crayola-300': #ec798d,
  'red-crayola-400': #e95f77,
  'red-crayola-500': #e33755,
  'red-crayola-600': #cf324d,
  'red-crayola-700': #a1273c,
  'red-crayola-800': #7d1e2f,
  'red-crayola-900': #5f1724,

  'warm-grey-50': #f6f4f3,
  'warm-grey-100': #e2dcda,
  'warm-grey-200': #d3cbc8,
  'warm-grey-300': #bfb4af,
  'warm-grey-400': #b3a59f,
  'warm-grey-500': #a08f87,
  'warm-grey-600': #92827b,
  'warm-grey-700': #726660,
  'warm-grey-800': #584f4a,
  'warm-grey-900': #433c39,

  'yellow-gold-50': #fffae6,
  'yellow-gold-100': #fff3c2,
  'yellow-gold-200': #ffea91,
  'yellow-gold-300': #ffe05e,
  'yellow-gold-400': #ffd72e,
  'yellow-gold-500': #ffce00,
  'yellow-gold-600': #d9af00,
  'yellow-gold-700': #b59200,
  'yellow-gold-800': #917500,
  'yellow-gold-900': #735d00,

  'orange-abricot-50': #fff9ed,
  'orange-abricot-100': #fff1d4,
  'orange-abricot-200': #ffdfa9,
  'orange-abricot-300': #ffbe5c,
  'orange-abricot-400': #fea439,
  'orange-abricot-500': #fc8713,
  'orange-abricot-600': #ed6c09,
  'orange-abricot-700': #c55109,
  'orange-abricot-800': #9c4010,
  'orange-abricot-900': #7e3610,

  'purple-violet-50': #f3f1ff,
  'purple-violet-100': #dbd4ff,
  'purple-violet-200': #cabfff,
  'purple-violet-300': #b1a1ff,
  'purple-violet-400': #a28fff,
  'purple-violet-500': #8b73ff,
  'purple-violet-600': #7e69e8,
  'purple-violet-700': #6352b5,
  'purple-violet-800': #4c3f8c,
  'purple-violet-900': #3a306b,

  'red-tomato-50': #fff0ed,
  'red-tomato-100': #ffd0c7,
  'red-tomato-200': #ffbaac,
  'red-tomato-300': #ff9a86,
  'red-tomato-400': #ff866e,
  'red-tomato-500': #ff684a,
  'red-tomato-600': #e85f43,
  'red-tomato-700': #b54a35,
  'red-tomato-800': #8c3929,
  'red-tomato-900': #6b2c1f
);


$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')
    ),
    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')
    ),
    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')        
    ),
    grn: (
        950: #171717,
        900: #313131,
        800: #474747,
        700: #606060,
        600: #777777,
        500: #909090,
        400: #a9a9a9,
        300: #bfbfbf,
        200: #d8d8d8,
        100: #e4e4e4,
        75: #efefef,
        50: #f7f7f7,
        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')         
    ),
    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')         
    ),
    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')          
    ),
    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')         
    ),
    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')          
    )
);








// COLOR STATES

$color-state-map: (
    branding: (
        base: 'br-900',
        default: 'br-900',
        lighter: 'br-700',
        light: 'br-800',
        dark: 'br-950',
        surface: 'br-900',
        on-surface: 'br-900-contrast',
        surface-light: 'br-800',
        on-surface-light: 'br-800-contrast',
        surface-dark: 'br-950',
        on-surface-dark: 'br-950-contrast'        
    ),
    primary: (
        base: 'pr-600', 
        default: 'pr-700',
        lighter: 'pr-500',
        light: 'pr-600',
        dark: 'pr-900',
        darker: 'pr-950',
        surface-light: 'pr-75',
        on-surface-light: 'pr-900',
        surface-light-hover: 'pr-100',
        on-surface-light-hover: 'pr-950',
        surface-medium: 'pr-200',
        on-surface-medium: 'pr-200-contrast', 
        surface: 'pr-600',
        on-surface: 'pr-600-contrast',
        surface-hover: 'pr-700',
        on-surface-hover: 'pr-700-contrast',
        surface-dark: 'pr-900',
        on-surface-dark: 'pr-900-contrast',        
        border: 'pr-500',
        border-light: 'pr-300',
        border-lighter: 'pr-200'
    ),
    secondary: (
        base: 'gr-500',
        default: 'gr-800',
        lighter: 'gr-600',
        light: 'gr-700',
        dark: 'gr-900',      
        darker: 'gr-950',   
        surface-light: 'gr-50',
        on-surface-light: 'gr-900',
        surface-light-hover: 'gr-75',
        on-surface-light-hover: 'gr-950',
        surface-medium: 'gr-100',
        on-surface-medium: 'gr-900',
        surface: 'gr-600',
        on-surface: 'gr-600-contrast',
        surface-hover: 'gr-700',
        on-surface-hover: 'gr-700-contrast',
        surface-dark: 'gr-900',
        on-surface-dark: 'gr-900-contrast',        
        border: 'gr-500',
        border-light: 'gr-300',
        border-lighter: 'gr-200'
    ),
    neutral: (
        base: 'grn-500',
        default: 'grn-800',
        lighter: 'grn-600',
        light: 'grn-700',
        dark: 'grn-900',      
        darker: 'grn-950',   
        surface-light: 'grn-50',
        on-surface-light: 'grn-900',
        surface-light-hover: 'grn-75',
        on-surface-light-hover: 'grn-950',
        surface-medium: 'grn-100',
        on-surface-medium: 'grn-900',
        surface: 'grn-400',
        on-surface: 'grn-400-contrast',
        surface-hover: 'grn-300',
        on-surface-hover: 'grn-300-contrast',
        surface-dark: 'grn-900',
        on-surface-dark: 'grn-900-contrast',        
        border: 'grn-500',
        border-light: 'grn-400',
        border-lighter: 'grn-300'
    ),
    cta: (
        base: 'cta-400',
        default: 'cta-900',
        lighter: 'cta-400',
        light: 'cta-500',
        dark: 'cta-800',
        darker: 'cta-900',
        surface-light: 'cta-25',
        on-surface-light: 'cta-800',
        surface-light-hover: 'cta-50',
        on-surface-light-hover: 'cta-950',
        surface-medium: 'cta-75',
        on-surface-medium: 'cta-900',
        surface: 'cta-400',
        on-surface: 'cta-400-contrast',
        surface-hover: 'cta-500',
        on-surface-hover: 'cta-500-contrast',
        surface-dark: 'cta-600',
        on-surface-dark: 'cta-600-contrast',        
        border: 'cta-300',
        border-light: 'cta-100',
        border-lighter: 'cta-75'
    ),
    info: (
        base: 'in-500',
        default: 'in-600',
        lighter: 'in-400',
        light: 'in-500',
        dark: 'in-800',
        darker: 'in-900',
        surface-light: 'in-75',
        on-surface-light: 'in-600',
        surface-light-hover: 'in-100',
        on-surface-light-hover: 'in-800',
        surface-medium: 'in-200',
        on-surface-medium: 'in-950',
        surface: 'in-600',
        on-surface: 'in-600-contrast',
        surface-hover: 'in-800',
        on-surface-hover: 'in-800-contrast',
        surface-dark: 'in-800',
        on-surface-dark: 'in-800-contrast',        
        border: 'in-400',
        border-light: 'in-300',
        border-lighter: 'in-200'
    ),
    success: (
        base: 'su-700',
        default: 'su-900',
        lighter: 'su-700',
        light: 'su-800',
        dark: 'su-900',
        darker: 'su-950',
        surface-light: 'su-100',
        on-surface-light: 'su-950',
        surface-light-hover: 'su-200',
        on-surface-light-hover: 'su-950',
        surface-medium: 'su-300',
        on-surface-medium: 'su-950',
        surface: 'su-900',
        on-surface: 'su-950-contrast',
        surface-hover: 'su-950',
        on-surface-hover: 'su-950-contrast',
        surface-dark: 'su-950',
        on-surface-dark: 'su-950-contrast',        
        border: 'su-600',
        border-light: 'su-400',
        border-lighter: 'su-300'
    ),
    warning: (
        base: 'wa-500',
        default: 'wa-900',
        lighter: 'wa-700',
        light: 'wa-800',
        dark: 'wa-950',
        darker: 'wa-950',
        surface-light: 'wa-50',
        on-surface-light: 'wa-900',
        surface-light-hover: 'wa-75',
        on-surface-light-hover: 'wa-950',
        surface-medium: 'wa-100',
        on-surface-medium: 'wa-900',
        surface: 'wa-500',
        on-surface: 'wa-500-contrast',
        surface-hover: 'wa-600',
        on-surface-hover: 'wa-600-contrast',
        surface-dark: 'wa-900',
        on-surface-dark: 'wa-900-contrast',        
        border: 'wa-400',
        border-light: 'wa-200',
        border-lighter: 'wa-100'
    ),
    danger: (
        base: 'da-600',
        default: 'da-600',
        lighter: 'da-400',
        light: 'da-500',
        dark: 'da-700',
        darker: 'da-800',
        surface-light: 'da-75',
        on-surface-light: 'da-700',
        surface-light-hover: 'da-100',
        on-surface-light-hover: 'da-900',
        surface-medium: 'da-200',
        on-surface-medium: 'da-900',
        surface: 'da-600',
        on-surface: 'da-600-contrast',
        surface-hover: 'da-700',
        on-surface-hover: 'da-700-contrast',
        surface-dark: 'da-800',
        on-surface-dark: 'da-800-contrast',
        border: 'da-500',
        border-light: 'da-300',
        border-lighter: 'da-200'
    ),
);

// SHADOWS

$ecl-shadow-color: #18274b !default;
$ecl-shadow: (
  1: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 6px 12px 0 rgba($ecl-shadow-color, 0.08)),
  2: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 10px 22px 0 rgba($ecl-shadow-color, 0.1)),
  3: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 12px 32px 0 rgba($ecl-shadow-color, 0.12)),
  4: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 14px 42px 0 rgba($ecl-shadow-color, 0.12)),
  5: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 18px 52px 0 rgba($ecl-shadow-color, 0.14))
);

$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)
);


// TYPOGRAPHY
$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl');

$font-size-map: (
  '8xl': 3.75rem,
  '7xl': 3.25rem,
  '6xl': 2.5rem,
  '5xl': 2.25rem,
  '4xl': 2rem,
  '3xl': 1.75rem,
  '2xl': 1.5rem,
  'xl': 1.375rem,
  'l': 1.25rem,
  'm': 1.125rem,
  's': 1rem,
  'xs': 0.875rem,
  '2xs': 0.75rem,
  '3xs': 0.675rem
);

$font-line-height-map: (
  '7xl': 3.75rem,
  '6xl': 3.5rem,
  '5xl': 3.25rem,
  '4xl': 3rem,
  '3xl': 2.75rem,
  '2xl': 2.5rem,
  'xl': 2.25rem,
  'l': 2rem,
  'm': 1.75rem,
  's': 1.5rem,
  'xs': 1.25rem,
  '2xs': 1rem,
  '3xs': 0.875rem
);

$font-map: (
    8xl: (
        desktop: (
            font-size: 8xl,
            line-height: 7xl
        ),
        tablet: (
            font-size: 7xl,
            line-height: 6xl
        ),
        mobile: (
            font-size: 6xl,
            line-height: 3xl
        ),
        mobile-xs: (
            font-size: 4xl,
            line-height: xl
        )        
    ),
    7xl: (
        desktop: (
            font-size: 7xl,
            line-height: 6xl
        ),
        tablet: (
            font-size: 6xl,
            line-height: 3xl
        ),
        mobile: (
            font-size: 5xl,
            line-height: 3xl
        ),
        mobile-xs: (
            font-size: 4xl,
            line-height: xl
        )        
    ),
    6xl: (
        desktop: (
            font-size: 6xl,
            line-height: 4xl
        ),
        tablet: (
            font-size: 5xl,
            line-height: 3xl
        ),
        mobile: (
            font-size: 4xl,
            line-height: xl
        ),
        mobile-xs: (
            font-size: 3xl,
            line-height: xl
        ) 
    ),
    5xl: (
        desktop: (
            font-size: 5xl,
            line-height: 3xl
        ),
        tablet: (
            font-size: 4xl,
            line-height: xl
        ),
        mobile: (
            font-size: 3xl,
            line-height: xl
        ),
        mobile-xs: (
            font-size: 2xl,
            line-height: l
        ) 
    ),
    4xl: (
        desktop: (
            font-size: 4xl,
            line-height: xl
        ),
        tablet: (
            font-size: 3xl,
            line-height: xl
        ),
        mobile: (
            font-size: 2xl,
            line-height: l
        ),
        mobile-xs: (
            font-size: xl,
            line-height: l
        ) 
    ),
    3xl: (
        desktop: (
            font-size: 3xl,
            line-height: xl
        ),
        tablet: (
            font-size: 2xl,
            line-height: xl
        ),
        mobile: (
            font-size: xl,
            line-height: l
        ),
        mobile-xs: (
            font-size: l,
            line-height: m
        ) 
    ),
    2xl: (
        desktop: (
            font-size: 2xl,
            line-height: xl
        ),
        tablet: (
            font-size: xl,
            line-height: l
        ),
        mobile: (
            font-size: l,
            line-height: m
        ),
        mobile-xs: (
            font-size: l,
            line-height: m
        ) 
    ),
    xl: (
        desktop: (
            font-size: xl,
            line-height: m
        ),
        tablet: (
            font-size: xl,
            line-height: m
        ),
        mobile: (
            font-size: l,
            line-height: m
        ),
        mobile-xs: (
            font-size: m,
            line-height: s
        ) 
    ),
    l: (
        desktop: (
            font-size: m,
            line-height: s
        ),
        tablet: (
            font-size: m,
            line-height: s
        ),
        mobile: (
            font-size: s,
            line-height: s
        ),
        mobile-xs: (
            font-size: s,
            line-height: s
        ) 
    ),
    m: (
        desktop: (
            font-size: s,
            line-height: s
        ),
        tablet: (
            font-size: s,
            line-height: s
        ),
        mobile: (
            font-size: s,
            line-height: s
        ),
        mobile-xs: (
            font-size: s,
            line-height: s
        ) 
    ),
    s: (
        desktop: (
            font-size: xs,
            line-height: s
        ),
        tablet: (
            font-size: xs,
            line-height: s
        ),
        mobile: (
            font-size: xs,
            line-height: s
        ),
        mobile-xs: (
            font-size: xs,
            line-height: s
        ) 
    ),
    xs: (
        desktop: (
            font-size: 2xs,
            line-height: xs
        ),
        tablet: (
            font-size: 2xs,
            line-height: xs
        ),
        mobile: (
            font-size: 2xs,
            line-height: xs
        ),
        mobile-xs: (
            font-size: 2xs,
            line-height: xs
        ) 
    ),
    2xs: (
        desktop: (
            font-size: 3xs,
            line-height: 2xs
        ),
        tablet: (
            font-size: 3xs,
            line-height: 2xs
        ),
        mobile: (
            font-size: 3xs,
            line-height: 2xs
        ),
        mobile-xs: (
            font-size: 3xs,
            line-height: 2xs
        ) 
    )
);

$font-weight-map: (
    'light': 300,
    'regular': 400,
    'medium': 500,
    'semi-bold': 600,
    'bold': 700
);
