@use 'sass:map';
@use '../01-base' as base;
@use './maps' as maps;
@use './maps-colors-default' as colors;

@font-face {
  font-family: 'Inter';
  src: url('#{base.$eui-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Inter';
  src: url('#{base.$eui-assets-base-path}/fonts/inter/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
  font-style: italic;
}

:root {
    // GENERIC CONTEXT COLORS
    // ----------------------
    
    --eui-c-transparent: transparent;
    --eui-c-white: #fff;
    --eui-c-black: #000;

    --eui-c-secondary-min: #{map.get(map.get(colors.$color-map, grn), 25)};
    --eui-c-secondary-max: #{map.get(map.get(colors.$color-map, grn), 950)};

    --eui-c-surface-page: #{map.get(map.get(colors.$color-map, grn), 25)};
    --eui-c-surface-container: var(--eui-c-white);
    
    --eui-c-surface-shell: #{map.get(map.get(colors.$color-map, grn), 50)};
    --eui-c-surface-container-1: #{map.get(map.get(colors.$color-map, grn), 75)};
    --eui-c-surface-container-2: #{map.get(map.get(colors.$color-map, grn), 100)};
    --eui-c-surface-container-3: #{map.get(map.get(colors.$color-map, grn), 200)};

    --eui-c-text: #{map.get(map.get(colors.$color-map, gr), 950)};
    --eui-c-text-light: #{map.get(map.get(colors.$color-map, gr), 800)};
    --eui-c-text-lighter: #{map.get(map.get(colors.$color-map, gr), 700)};
    --eui-c-text-lightest: #{map.get(map.get(colors.$color-map, gr), 600)};

    --eui-c-focus-visible: #{map.get(map.get(colors.$color-map, pr), 600)};
    --eui-c-focus: #{map.get(map.get(colors.$color-map, pr), 200)};
    
    --eui-c-hover: #{map.get(map.get(colors.$color-map, pr), 75)};
    --eui-c-hover-disabled: #{map.get(map.get(colors.$color-map, gr), 100)};

    --eui-c-active: #{map.get(map.get(colors.$color-map, pr), 600)};
    --eui-c-active-bg: #{map.get(map.get(colors.$color-map, pr), 200)};
    --eui-c-active-bg-alt: #{map.get(map.get(colors.$color-map, pr), 300)};
    --eui-c-active-bg-light: #{map.get(map.get(colors.$color-map, pr), 100)};
    --eui-c-active-bg-lighter: #{map.get(map.get(colors.$color-map, pr), 75)};

    --eui-c-disabled: #{map.get(map.get(colors.$color-map, gr), 500)};
    --eui-c-disabled-bg: #{map.get(map.get(colors.$color-map, gr), 50)};
    --eui-c-readonly: #{map.get(map.get(colors.$color-map, gr), 600)};

    --eui-c-link: #{map.get(map.get(colors.$color-map, pr), 600)};

    --eui-c-divider: #{map.get(map.get(colors.$color-map, gr), 100)};
    --eui-c-divider-dark: #{map.get(map.get(colors.$color-map, gr), 200)};
    --eui-c-divider-light: #{map.get(map.get(colors.$color-map, gr), 75)};


    // RGB

    --eui-c-white-rgb: #{base.toRGB(#fff)};
    --eui-c-black-rgb: #{base.toRGB(#000)};

    --eui-c-secondary-min-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, grn), 25))};
    --eui-c-secondary-max-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, grn), 950))};

    --eui-c-surface-page-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, grn), 25))};
    --eui-c-surface-container: var(--eui-c-white);
    
    --eui-c-surface-shell-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, grn), 50))};
    --eui-c-surface-container-1-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, grn), 75))};
    --eui-c-surface-container-2-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, grn), 100))};
    --eui-c-surface-container-3-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, grn), 200))};

    --eui-c-text-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 950))};
    --eui-c-text-light-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 800))};
    --eui-c-text-lighter-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 700))};
    --eui-c-text-lightest-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 600))};

    --eui-c-focus-visible-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 600))};
    --eui-c-focus-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 200))};
    
    --eui-c-hover-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 75))};
    --eui-c-hover-disabled-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 100))};

    --eui-c-active-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 600))};
    --eui-c-active-bg-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 200))};
    --eui-c-active-bg-alt-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 300))};
    --eui-c-active-bg-light-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 100))};
    --eui-c-active-bg-lighter-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 75))};

    --eui-c-disabled-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 500))};
    --eui-c-disabled-bg-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 50))};
    --eui-c-readonly-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 600))};

    --eui-c-link-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, pr), 600))};

    --eui-c-divider-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 100))};
    --eui-c-divider-dark-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 200))};
    --eui-c-divider-light-rgb: #{base.toRGB(map.get(map.get(colors.$color-map, gr), 75))};


    --eui-c-black-alpha-025: rgba(0,0,0, 0.025);
    --eui-c-black-alpha-10: rgba(0,0,0, 0.1);
    --eui-c-black-alpha-075: rgba(0,0,0, 0.075);


    // CONTEXT COLORS FROM PALETTES
    // ----------------------------

    @each $color, $shades in colors.$color-state-map {
        @each $shade, $value in $shades {
            @if $shade == default {
                --eui-c-#{$color}: #{$value};
                --eui-c-#{$color}-rgb: #{base.toRGB($value)};
            } @else {
                --eui-c-#{$color + '-' + $shade}: #{$value};
                --eui-c-#{$color + '-' + $shade}-rgb: #{base.toRGB($value)};
            }
        }
    }


    // TYPOGRAPHY - eui-f
    // ------------------

    // TYPOGRAPHY
    --eui-f-family: 'Inter', arial, sans-serif;

    // font families
    --eui-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;

    // font sizes
    --eui-f-size-base: 16px;

    // base line-height / scale-factor (for compact mode)
    --eui-base-line-height: 1.5;
    --eui-base-scale-factor: 1;

    // font aliases
    --eui-f: var(--eui-f-m);
    --eui-f-light: var(--eui-f-m-light);
    --eui-f-medium: var(--eui-f-m-medium);
    --eui-f-semi-bold: var(--eui-f-m-semi-bold);
    --eui-f-bold: var(--eui-f-m-bold);

    @each $size, $sizeDef in maps.$font-map {
        $desktop: map.get($sizeDef, 'desktop');
        --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
        --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
        --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
        --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
        --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
    }

    @include base.media(maps.$eui-bkp-tablet) {
        @each $size, $sizeDef in maps.$font-map {
            $tablet: map.get($sizeDef, 'tablet');
            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
        }
    }

    @include base.media(maps.$eui-bkp-mobile-s) {
        @each $size, $sizeDef in maps.$font-map {        
            $mobile: map.get($sizeDef, 'mobile');
            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
        }
    }

    @include base.media(maps.$eui-bkp-mobile-xs) {
        @each $size, $sizeDef in maps.$font-map {        
            $mobilexs: map.get($sizeDef, 'mobile-xs');
            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
        }
    }

    @each $size, $def in maps.$font-size-map {
        --eui-f-s-#{$size}: #{$def};
    }

    @each $size, $def in maps.$font-line-height-map {
        --eui-f-lh-#{$size}: #{$def};
    }

    @each $size, $def in maps.$font-weight-map {
        --eui-f-w-#{$size}: #{$def};
    }


    // SPACING - eui-s
    // ---------------

    @each $spacing, $value in maps.$spacing-map {
        --eui-s-#{$spacing}: #{$value};
    }

    
    // BORDER RADIUS - eui-br
    // ----------------------

    @each $br, $value in maps.$border-radius-map {
        --eui-br-#{$br}: #{$value};
    }


    // LAYOUT-BREAKPOINTS - eui-bp
    // ---------------------------

    @each $bp, $value in maps.$breakpoint-map {
        --eui-bp-#{$bp}: #{$value};
    }


    // BORDER WIDTH - eui-bw
    // ---------------------

    @each $br, $value in maps.$border-width-map {
        --eui-bw-#{$br}: #{$value};
    }


    // BOX-SHADOWS - eui-sh
    // --------------------

    @each $sh, $value in maps.$box-shadow-map {
        --eui-sh-#{$sh}: #{$value};
    }


    // ICON-SIZES - eui-is
    // -------------------

    @each $icon-size, $value in maps.$icon-size-map {
        --eui-is-#{$icon-size}: #{$value};
    }


    // OPACITY - eui-o
    // ---------------

    @each $idx, $value in maps.$opacity-map {
        --eui-o-#{$idx}: #{$value};
    }


    // Z-INDEXES - eui-zi
    // -------------------

    @each $idx, $value in maps.$z-index-map {
        --eui-zi-#{$idx}: #{$value};
    }


    // OTHERS 
    // ------
    --eui-internal-icon-checkmark-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/check.svg');
    --eui-internal-icon-remove-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/remove.svg');
    --eui-internal-icon-ellipse-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/ellipse.svg');
    --eui-internal-icon-external-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/external.svg');
    --eui-internal-icon-chevron-down-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/chevron-down.svg');    



    // Animations related
    --eui-base-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 1);
    --eui-base-animation-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --eui-base-animation-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1);
    --eui-base-animation-ease-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);    // ease
    --eui-base-animation-ease-in-out-timing-function: ease-in-out;

    --eui-base-animation-duration-fast: 0.25s;
    --eui-base-animation-duration-medium: 0.5s;
    --eui-base-animation-duration-slow: 1s;
    --eui-base-animation-duration-base: 500ms;
    --eui-base-animation-duration: var(--eui-base-animation-duration-base);

    --eui-base-animation-transition-base: all 0.2s #{var(--eui-base-animation-linear-out-slow-in-timing-function)};
    --eui-base-animation-transition-ease: all 0.2s #{var(--eui-base-animation-ease-timing-function)};
    --eui-base-animation-transition-ease-in-out: all 0.2s #{var(--eui-base-animation-ease-in-out-timing-function)};
    --eui-base-animation-transition-ease-in-out-1s: all 1s #{var(--eui-base-animation-ease-in-out-timing-function)};

    --eui-base-animation-delay: 0s;
    --eui-base-animation-direction: normal;
    --eui-base-animation-fill-mode: forwards;    // this prevents the animation from restarting
    --eui-base-animation-background-color: var(--eui-c-primary-surface-light);
}