// config stylesheet allows us to use #{$prefix}
@use 'sass:map';
@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-icon-component {
    $sizes-types: (sm, md, lg, xl, xxl);
    $sizes: (
        sm: 16px,
        md: 24px,
        lg: 32px,
        xl: 64px,
        xxl: 128px,
    );
    $colors: (
        'black': c.$msk--black-100,
        'white': c.$msk--white-0,
        'blue': c.$msk--blue-70,
        'warm-gray': c.$msk--warm-gray-70,
        'gray': c.$msk--gray-70,
        'cool-gray': c.$msk--cool-gray-70,
        'cyan': c.$msk--cyan-70,
        'green': c.$msk--green-70,
        'magenta': c.$msk--magenta-70,
        'orange': c.$msk--orange-70,
        'purple': c.$msk--purple-70,
        'red': c.$msk--red-70,
        'teal': c.$msk--teal-70,
        'yellow': c.$msk--yellow-70,
    );
    $low-contrast-colors: (
        'blue': c.$msk--blue-10,
        'warm-gray': c.$msk--warm-gray-10,
        'gray': c.$msk--gray-10,
        'cool-gray': c.$msk--cool-gray-10,
        'cyan': c.$msk--cyan-10,
        'green': c.$msk--green-10,
        'magenta': c.$msk--magenta-10,
        'orange': c.$msk--orange-10,
        'purple': c.$msk--purple-10,
        'red': c.$msk--red-10,
        'teal': c.$msk--teal-10,
        'yellow': c.$msk--yellow-10,
    );

    @each $size in $sizes-types {
        .msk-icon {
            // set the font-size for the icon
            &.msk-icon--#{$size} {
                font-size: m.msk-rem(map-get($sizes, $size));
            }

            // set the color for the icon
            @each $color in map-keys($colors) {
                &.msk-icon--#{$color}:not(.msk-icon--low-contrast) {
                    color: map-get($colors, $color);
                }
            }

            // low contrast colors
            @each $color in map-keys($low-contrast-colors) {
                &.msk-icon--#{$color}.msk-icon--low-contrast {
                    color: map-get($low-contrast-colors, $color);
                }
            }
        }
    }
}