// BG-COLORS
@each $color, $shades in $eui-base-tokens-colors {
    @each $shade, $value in $shades {
        .eui-showcase-bg-color-#{$color + '-' + $shade}::after {
            content: "#{$value}";
        }
    }
}

// FONT DEFS
@each $font-size, $def in $eui-base-tokens-fonts {
    .eui-showcase-font-#{$font-size}::after {
        content: "#{$def}";
    }
}
@each $font-size, $def in $eui-base-tokens-fonts-bold {
    .eui-showcase-font-bold-#{$font-size}::after {
        content: "#{$def}";
    }
}


// FONT-SIZES
@each $font-size, $value in $eui-base-tokens-font-sizes {
    .eui-showcase-font-size-#{$font-size}::after {
        content: "#{$value}";
    }
}

@each $size, $value in $eui-base-tokens-spacings {
    .eui-showcase-spacing-size-#{$size}::after {
        content: "#{$value}";
    }
}

.eui-showcase-shadows {
    td {
        display: table-cell;
        vertical-align: middle !important;
    }

    &__item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--eui-base-color-white);
        width: var(--eui-base-spacing-2xl);
        height: var(--eui-base-spacing-2xl);
        margin: var(--eui-base-spacing-xl);
    }
}

.eui-showcase-download {
    display: inline-flex;
    align-items: center;
    padding: var(--eui-base-spacing-m);
    border: 1px solid var(--eui-base-color-grey-25);
    background-color: var(--eui-base-color-white);

    &__icon {
        width: var(--eui-base-spacing-xl);
        margin-right: var(--eui-spacing-s);
    }

    &__title {
        font: var(--eui-base-font-m);
        font-weight: bold;
    }

    &__subtitle {
        font: var(--eui-base-font-s);
        color: var(--eui-base-color-grey-75);
        margin-top: var(--eui-spacing-2xs);
    }
}


// generating contrast ratio based on the default maps of colors known

@each $color, $shades in $eui-base-tokens-colors {
    @each $shade, $value in $shades {
        // @debug $color, $value, find-safe-color($value);
        $contrastRatio: calculate-contrast($value, getContrast($value));

        .eui-showcase-ratio-#{$color + '-' + $shade}::after {
            content: "#{$contrastRatio}";
        }
        .eui-showcase-ratio-#{$color + '-' + $shade} {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.25rem;
            min-width: 2rem;
            border: 1px dotted var(--eui-base-color-white);
        }

        @if $contrastRatio < 4.5 {
            .eui-showcase-ratio-#{$color + '-' + $shade} {
                background-color: var(--eui-base-color-danger-50);
                color: var(--eui-base-color-danger-50-contrast);
            }
        } @else {
            .eui-showcase-ratio-#{$color + '-' + $shade} {
                background-color: var(--eui-base-color-success-100);
                color: var(--eui-base-color-success-100-contrast);
            }
        }
    }
}

// special utilities showcase only for themes
// ------------------------------------------

// HIGH CONTRAST

:root {
    @each $color, $shades in $eui-base-tokens-colors-high-contrast {
        @each $shade, $value in $shades {
            --eui-base-color-hc-#{$color + '-' + $shade}: #{$value};
            --eui-base-color-hc-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
        }
    }
}


@each $color, $shades in $eui-base-tokens-colors-high-contrast {
    @each $shade, $value in $shades {
        .eui-u-color-hc-#{$color + '-' + $shade} {
            color: var(--eui-base-color-hc-#{$color + '-' + $shade}) !important;
        };

        .eui-u-bg-color-hc-#{$color + '-' + $shade} {
            background-color: var(--eui-base-color-hc-#{$color + '-' + $shade}) !important;
            color: var(--eui-base-color-hc-#{$color + '-' + $shade}-contrast) !important;
        }
    }
}

@each $color, $shades in $eui-base-tokens-colors-high-contrast {
    @each $shade, $value in $shades {
        .eui-showcase-bg-color-hc-#{$color + '-' + $shade}::after {
            content: "#{$value}";
        }
    }
}

@each $color, $shades in $eui-base-tokens-colors-high-contrast {
    @each $shade, $value in $shades {
        // @debug $color, $value, find-safe-color($value);
        $contrastRatio: calculate-contrast($value, getContrast($value));

        .eui-showcase-ratio-hc-#{$color + '-' + $shade}::after {
            content: "#{$contrastRatio}";
        }
        .eui-showcase-ratio-hc-#{$color + '-' + $shade} {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.25rem;
            min-width: 2rem;
            border: 1px dotted var(--eui-base-color-white);
        }

        @if $contrastRatio < 7.0 {
            .eui-showcase-ratio-hc-#{$color + '-' + $shade} {
                background-color: var(--eui-base-color-danger-50);
                color: var(--eui-base-color-danger-50-contrast);
            }
        } @else {
            .eui-showcase-ratio-hc-#{$color + '-' + $shade} {
                background-color: var(--eui-base-color-success-100);
                color: var(--eui-base-color-success-100-contrast);
            }
        }
    }
}


// DARK THEME

:root {
    @each $color, $shades in $eui-base-tokens-colors-dark {
        @each $shade, $value in $shades {
            --eui-base-color-dark-#{$color + '-' + $shade}: #{$value};
            --eui-base-color-dark-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
        }
    }
}


@each $color, $shades in $eui-base-tokens-colors-dark {
    @each $shade, $value in $shades {
        .eui-u-color-dark-#{$color + '-' + $shade} {
            color: var(--eui-base-color-dark-#{$color + '-' + $shade}) !important;
        };

        .eui-u-bg-color-dark-#{$color + '-' + $shade} {
            background-color: var(--eui-base-color-dark-#{$color + '-' + $shade}) !important;
            color: var(--eui-base-color-dark-#{$color + '-' + $shade}-contrast) !important;
        }
    }
}

@each $color, $shades in $eui-base-tokens-colors-dark {
    @each $shade, $value in $shades {
        .eui-showcase-bg-color-dark-#{$color + '-' + $shade}::after {
            content: "#{$value}";
        }
    }
}

@each $color, $shades in $eui-base-tokens-colors-dark {
    @each $shade, $value in $shades {
        // @debug $color, $value, find-safe-color($value);
        $contrastRatio: calculate-contrast($value, getContrast($value));

        .eui-showcase-ratio-dark-#{$color + '-' + $shade}::after {
            content: "#{$contrastRatio}";
        }
        .eui-showcase-ratio-dark-#{$color + '-' + $shade} {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.25rem;
            min-width: 2rem;
            border: 1px dotted var(--eui-base-color-white);
        }

        @if $contrastRatio < 4.5 {
            .eui-showcase-ratio-dark-#{$color + '-' + $shade} {
                background-color: var(--eui-base-color-danger-50);
                color: var(--eui-base-color-danger-50-contrast);
            }
        } @else {
            .eui-showcase-ratio-dark-#{$color + '-' + $shade} {
                background-color: var(--eui-base-color-success-100);
                color: var(--eui-base-color-success-100-contrast);
            }
        }
    }
}



