@use 'sass:map';
@use '../01-base' as base;
@use '../02-tokens/colors-dark-theme' as colors;

html.eui-t-dark {
    --eui-c-black: #fff;
    --eui-c-white: #000;


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

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


    --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), 400)};
    
    --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), 100)};
    --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), 300)};
    --eui-c-divider-dark: #{map.get(map.get(colors.$color-map, gr), 100)};
    --eui-c-divider-light: #{map.get(map.get(colors.$color-map, gr), 200)};


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

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