@use 'sass:map';
@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;

@mixin msk-label {
    .msk-label {
        align-items: center;
        border-radius: m.msk-rem(8px);
        display: flex;
        gap: m.msk-rem(8px);
        height: fit-content;
        line-height: 1.5;
        padding: 0 m.msk-rem(8px);
        width: fit-content;
    }

    $label-bg-color-map: (
        'red': tk.$msk--color-bg-tag-red,
        'magenta': tk.$msk--color-bg-tag-magenta,
        'purple': tk.$msk--color-bg-tag-purple,
        'blue': tk.$msk--color-bg-tag-blue,
        'cyan': tk.$msk--color-bg-tag-cyan,
        'teal': tk.$msk--color-bg-tag-teal,
        'green': tk.$msk--color-bg-tag-green,
        'yellow': tk.$msk--color-bg-tag-yellow,
        'orange': tk.$msk--color-bg-tag-orange,
        'gray': tk.$msk--color-bg-tag-gray,
        'cool-gray': tk.$msk--color-bg-tag-cool-gray,
        'warm-gray': tk.$msk--color-bg-tag-warm-gray,
        'high-contrast': tk.$msk--color-bg-tag-high-contrast,
        'outline': transparent,
        'ghost': transparent,
    );
    $label-content-color-map: (
        'red': tk.$msk--color-content-tag-red,
        'magenta': tk.$msk--color-content-tag-magenta,
        'purple': tk.$msk--color-content-tag-purple,
        'blue': tk.$msk--color-content-tag-blue,
        'cyan': tk.$msk--color-content-tag-cyan,
        'teal': tk.$msk--color-content-tag-teal,
        'green': tk.$msk--color-content-tag-green,
        'yellow': tk.$msk--color-content-tag-yellow,
        'orange': tk.$msk--color-content-tag-orange,
        'gray': tk.$msk--color-content-tag-gray,
        'cool-gray': tk.$msk--color-content-tag-cool-gray,
        'warm-gray': tk.$msk--color-content-tag-warm-gray,
        'high-contrast': tk.$msk--color-content-tag-high-contrast,
        'outline': tk.$msk--color-content-tag-outline,
        'ghost': tk.$msk--color-content-action-secondary,
    );
    $label-border-map: (
        'red': none,
        'magenta': none,
        'purple': none,
        'blue': none,
        'cyan': none,
        'teal': none,
        'green': none,
        'yellow': none,
        'orange': none,
        'gray': none,
        'cool-gray': none,
        'warm-gray': none,
        'high-contrast': none,
        'outline': 1px solid tk.$msk--color-border-tag-outline,
        'ghost': none,
    );

    @each $type in map-keys($label-bg-color-map) {
        .msk-label-#{$type},
        .msk-label-#{$type} .msk-label-icon {
            background-color: map-get($label-bg-color-map, $type);
            color: map-get($label-content-color-map, $type);
            border: map-get($label-border-map, $type);
        }
    }

    // .msk-label-blue,
    // .msk-label-blue .msk-label-icon {
    //     background-color: c.$msk--blue-20;
    //     color: c.$msk--blue-80;
    //     text-shadow: m.msk-rem(1px) m.msk-rem(1px) 0 c.$msk--blue-30;
    // }
}