@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;
@use '@carbon/styles/scss/components/tag';

@mixin msk-tag-disabled {
    &.#{$prefix}--tag--interactive:hover,
    &.#{$prefix}--tag--interactive:focus,
    &.#{$prefix}--tag--interactive:active,
    & {
        border-color: tk.$msk--color-border-disabled;
        color: tk.$msk--color-content-disabled;
        cursor: not-allowed;
    }

    .msk-tag-container {
        background-color: tk.$msk--color-bg-disabled;
        border-color: tk.$msk--color-border-disabled;
        color: tk.$msk--color-content-disabled;
        cursor: not-allowed;

        * {
            color: tk.$msk--color-content-disabled;
            fill: tk.$msk--color-content-disabled;
        }
    }

    &.#{$prefix}--tag--interactive:focus {
        padding: 0;
    }

    &:hover,
    &:focus,
    &:active {
        .msk-tag-container {
            background-color: tk.$msk--color-bg-disabled;
            border-color: tk.$msk--color-border-disabled;
        }
        .#{$prefix}--tag__close-icon {
            background-color: tk.$msk--color-bg-disabled;
            border-color: tk.$msk--color-border-disabled;
        }
    }

    .#{$prefix}--tag__close__container {
        border: 2px solid tk.$msk--color-border-disabled;
        border-left: 0;
        padding: 0;

        &:focus {
            border: none;
        }
    }

    .#{$prefix}--tag__close-icon {
        background-color: tk.$msk--color-bg-disabled;
        border-color: tk.$msk--color-border-disabled;
        color: tk.$msk--color-content-disabled;

        &:hover,
        &:focus {
            background-color: tk.$msk--color-bg-disabled;
            border-color: tk.$msk--color-border-disabled;
        }

        &:focus {
            border: none;
        }

        * {
            color: tk.$msk--color-content-disabled;
            fill: tk.$msk--color-content-disabled;
        }
    }
}

@mixin msk-tag-theme(
    $bg-color,
    $bg-color-hover,
    $bg-color-active,
    $text-color,
    $text-color-hover,
    $text-active-color,
    $border-color,
    $border-color-hover,
    $border-active-color
) {
    color: $text-color;

    .msk-tag--outside-container {
        border: 2px solid $border-color;
        border-radius: m.msk-rem(4px);
        background-color: $bg-color;
    }

    &:hover {
        background-color: transparent;
    }

    &.#{$prefix}--tag--interactive {
        &:hover,
        &:focus {
            border-color: $border-color-hover;
            color: $text-color-hover;

            .msk-tag-container {
                background-color: $bg-color-hover;
                color: $text-color-hover;
            }
        }

        &:active {
            border-color: $border-active-color;
            color: $text-active-color;

            .msk-tag-container {
                background-color: $bg-color-active;
                color: $text-active-color;
            }
        }

        &:focus {
            border-color: tk.$msk--color-border-focus-outer;
            box-shadow: none;
            padding: 1px;
        }
    }

    .#{$prefix}--tag__close-icon {
        background-color: $bg-color;
        color: $text-color;

        * {
            color: $text-color;
            fill: $text-color;
        }

        &:hover,
        &:focus {
            background-color: $bg-color-hover;
            color: $text-color-hover;
        }

        &:focus {
            border: 2px solid tk.$msk--color-border-focus-outer;
            box-shadow: none;
            padding-left: 0;
        }

        &:active {
            background-color: $bg-color-active;
            color: $text-active-color;
        }
    }

    &.#{$prefix}--tag--filter {
        &:hover,
        &:focus {
            .#{$prefix}--tag__close-icon {
                background-color: $bg-color-hover;
            }
        }
        &:active {
            .#{$prefix}--tag__close-icon {
                background-color: $bg-color-active;
            }
        }

        &:focus {
            .#{$prefix}--tag__close-icon {
                border-color: 2px solid tk.$msk--color-border-focus-outer;
                box-shadow: none;
            }
        }
    }

    .msk-tag-container {
        color: $text-color;

        .msk-tag-icon {
            color: $text-color;
        }

        * {
            color: $text-color;
            fill: $text-color;
        }
    }

    .cds--tag__close__container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .msk-tag--close-icon {
        border: none;
        background-color: transparent;
        height: 100%;
        cursor: pointer;

        &:hover {
            background-color: $bg-color-hover;
            color: $text-color-hover;
            outline: none;
        }
        &:focus {
            box-shadow: 0 0 0 m.msk-rem(2px) tk.$msk--color-border-focus-outer,
                inset 0 0 0 m.msk-rem(1px) tk.$msk--color-border-focus-inner;
            border-top-right-radius: m.msk-rem(2px);
            border-bottom-right-radius: m.msk-rem(2px);
        }
        &:active {
            background-color: $bg-color-active;
            color: $text-active-color;
        }
        .msk-icon {
            color: $text-color;
        }
    }

    &.#{$prefix}--tag--disabled {
        @include msk-tag-disabled;
    }
}

@mixin msk-tag {
    @include tag.tag;

    .#{$prefix}--tag {
        border: none;
        // border-radius: m.msk-rem(4px);
    }

    .msk-tag {
        align-items: center;
        background-color: transparent;
        display: inline-flex;
        gap: 8px;
        justify-content: center;
        padding: 0;

        span:first-child {
            display: flex;
        }

        .msk-tag-container {
            align-items: center;
            border-radius: 2px;
            cursor: pointer;
            display: flex;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            gap: 8px;
            justify-content: center;
            line-height: 28px;
            padding: 3px 8px;

            .msk-tag-icon {
                height: 20px;
                margin-right: 0;
                width: 20px;
            }
        }

        &:focus {
            .msk-tag-container {
                padding: 2px 7px;
            }
        }

        &.#{$prefix}--tag--filter {
            border: none;
            gap: 0;
            padding: 0;

            &:focus {
                .#{$prefix}--tag__close-icon {
                    border: 2px solid tk.$msk--color-border-focus-outer;
                    box-shadow: none;
                }
            }

            .#{$prefix}--tag__label {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .msk-tag-container {
                border-radius: 4px;
                border-bottom-right-radius: 0;
                border-right: 0;
                border-top-right-radius: 0;
                padding: 3px 8px;
            }
        }

        &.#{$prefix}--tag--disabled {
            @include msk-tag-disabled;

            &:focus,
            &:focus-within {
                .msk-tag-container {
                    padding: 3px 8px;
                }
            }
        }

        &.#{$prefix}--tag--interactive {
            &:focus {
                border-color: tk.$msk--color-border-focus-outer;
                box-shadow: none;
            }
        }

        &.#{$prefix}--tag--blue {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-blue,
                // bg hover color
                tk.$msk--color-bg-tag-blue-hover,
                // bg active color
                tk.$msk--color-bg-tag-blue-active,
                // text color
                tk.$msk--color-content-tag-blue,
                // text hover color
                tk.$msk--color-content-tag-blue-hover,
                // text active color
                tk.$msk--color-content-tag-blue-active,
                // border color
                tk.$msk--color-border-tag-blue,
                // border hover color
                tk.$msk--color-border-tag-blue-hover,
                // border active color
                tk.$msk--color-border-tag-blue-active
            );
        }

        &.#{$prefix}--tag--cool-gray {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-cool-gray,
                // bg hover color
                tk.$msk--color-bg-tag-cool-gray-hover,
                // bg active color
                tk.$msk--color-bg-tag-cool-gray-active,
                // text color
                tk.$msk--color-content-tag-cool-gray,
                // text hover color
                tk.$msk--color-content-tag-cool-gray-hover,
                // text active color
                tk.$msk--color-content-tag-cool-gray-active,
                // border color
                tk.$msk--color-border-tag-cool-gray,
                // border hover color
                tk.$msk--color-border-tag-cool-gray-hover,
                // border active color
                tk.$msk--color-border-tag-cool-gray-active
            );
        }

        &.#{$prefix}--tag--ghost {
            box-shadow: none;

            @include msk-tag-theme(
                // bg color
                transparent,
                // bg hover color
                tk.$msk--color-bg-action-hover,
                // bg active color
                tk.$msk--color-bg-action-active,
                // text color
                tk.$msk--color-content-action-secondary,
                // text hover color
                tk.$msk--color-content-action-secondary-hover,
                // text active color
                tk.$msk--color-content-action-secondary-active,
                // border color
                transparent,
                // border hover color
                transparent,
                // border active color
                transparent
            );
        }
        &.#{$prefix}--tag--red {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-red,
                // bg hover color
                tk.$msk--color-bg-tag-red-hover,
                // bg active color
                tk.$msk--color-bg-tag-red-active,
                // text color
                tk.$msk--color-content-tag-red,
                // text hover color
                tk.$msk--color-content-tag-red-hover,
                // text active color
                tk.$msk--color-content-tag-red-active,
                // border color
                tk.$msk--color-border-tag-red,
                // border hover color
                tk.$msk--color-border-tag-red-hover,
                // border active color
                tk.$msk--color-border-tag-red-active
            );
        }

        &.#{$prefix}--tag--magenta {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-magenta,
                // bg hover color
                tk.$msk--color-bg-tag-magenta-hover,
                // bg active color
                tk.$msk--color-bg-tag-magenta-active,
                // text color
                tk.$msk--color-content-tag-magenta,
                // text hover color
                tk.$msk--color-content-tag-magenta-hover,
                // text active color
                tk.$msk--color-content-tag-magenta-active,
                // border color
                tk.$msk--color-border-tag-magenta,
                // border hover color
                tk.$msk--color-border-tag-magenta-hover,
                // border active color
                tk.$msk--color-border-tag-magenta-active
            );
        }

        &.#{$prefix}--tag--purple {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-purple,
                // bg hover color
                tk.$msk--color-bg-tag-purple-hover,
                // bg active color
                tk.$msk--color-bg-tag-purple-active,
                // text color
                tk.$msk--color-content-tag-purple,
                // text hover color
                tk.$msk--color-content-tag-purple-hover,
                // text active color
                tk.$msk--color-content-tag-purple-active,
                // border color
                tk.$msk--color-border-tag-purple,
                // border hover color
                tk.$msk--color-border-tag-purple-hover,
                // border active color
                tk.$msk--color-border-tag-purple-active
            );
        }

        &.#{$prefix}--tag--cyan {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-cyan,
                // bg hover color
                tk.$msk--color-bg-tag-cyan-hover,
                // bg active color
                tk.$msk--color-bg-tag-cyan-active,
                // text color
                tk.$msk--color-content-tag-cyan,
                // text hover color
                tk.$msk--color-content-tag-cyan-hover,
                // text active color
                tk.$msk--color-content-tag-cyan-active,
                // border color
                tk.$msk--color-border-tag-cyan,
                // border hover color
                tk.$msk--color-border-tag-cyan-hover,
                // border active color
                tk.$msk--color-border-tag-cyan-active
            );
        }

        &.#{$prefix}--tag--teal {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-teal,
                // bg hover color
                tk.$msk--color-bg-tag-teal-hover,
                // bg active color
                tk.$msk--color-bg-tag-teal-active,
                // text color
                tk.$msk--color-content-tag-teal,
                // text hover color
                tk.$msk--color-content-tag-teal-hover,
                // text active color
                tk.$msk--color-content-tag-teal-active,
                // border color
                tk.$msk--color-border-tag-teal,
                // border hover color
                tk.$msk--color-border-tag-teal-hover,
                // border active color
                tk.$msk--color-border-tag-teal-active
            );
        }

        &.#{$prefix}--tag--green {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-green,
                // bg hover color
                tk.$msk--color-bg-tag-green-hover,
                // bg active color
                tk.$msk--color-bg-tag-green-active,
                // text color
                tk.$msk--color-content-tag-green,
                // text hover color
                tk.$msk--color-content-tag-green-hover,
                // text active color
                tk.$msk--color-content-tag-green-active,
                // border color
                tk.$msk--color-border-tag-green,
                // border hover color
                tk.$msk--color-border-tag-green-hover,
                // border active color
                tk.$msk--color-border-tag-green-active
            );
        }

        &.#{$prefix}--tag--gray {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-gray,
                // bg hover color
                tk.$msk--color-bg-tag-gray-hover,
                // bg active color
                tk.$msk--color-bg-tag-gray-active,
                // text color
                tk.$msk--color-content-tag-gray,
                // text hover color
                tk.$msk--color-content-tag-gray-hover,
                // text active color
                tk.$msk--color-content-tag-gray-active,
                // border color
                tk.$msk--color-border-tag-gray,
                // border hover color
                tk.$msk--color-border-tag-gray-hover,
                // border active color
                tk.$msk--color-border-tag-gray-active
            );
        }

        &.#{$prefix}--tag--warm-gray {
            @include msk-tag-theme(
                // bg color
                tk.$msk--color-bg-tag-warm-gray,
                // bg hover color
                tk.$msk--color-bg-tag-warm-gray-hover,
                // bg active color
                tk.$msk--color-bg-tag-warm-gray-active,
                // text color
                tk.$msk--color-content-tag-warm-gray,
                // text hover color
                tk.$msk--color-content-tag-warm-gray-hover,
                // text active color
                tk.$msk--color-content-tag-warm-gray-active,
                // border color
                tk.$msk--color-border-tag-warm-gray,
                // border hover color
                tk.$msk--color-border-tag-warm-gray-hover,
                // border active color
                tk.$msk--color-border-tag-warm-gray-active
            );
        }
        &.#{$prefix}--tag--outline {
            @include msk-tag-theme(
                // bg color
                transparent,
                // bg hover color
                tk.$msk--color-bg-tag-outline-hover,
                // bg active color
                tk.$msk--color-bg-tag-outline-active,
                // text color
                tk.$msk--color-content-tag-outline,
                // text hover color
                tk.$msk--color-content-tag-outline-hover,
                // text active color
                tk.$msk--color-content-tag-outline-active,
                // border color
                tk.$msk--color-border-tag-outline,
                // border hover color
                tk.$msk--color-border-tag-outline-hover,
                // border active color
                tk.$msk--color-border-tag-outline-active
            );
        }

        &.#{$prefix}--tag--lg {
            align-items: center;
            border-radius: 4px;
            border-width: 2px;
            justify-content: center;

            .msk-tag-container {
                padding: 6px 8px;
            }

            &:focus-within {
                .msk-tag-container {
                    padding: 5px 7px;
                }
            }

            &.#{$prefix}--tag--filter {
                padding: 0;

                .msk-tag-container {
                    padding: 6px 8px;
                }
                .#{$prefix}--tag__close__container {
                    height: 44px;
                    width: 44px;
                }
            }

            &.#{$prefix}--tag--disabled {
                &:focus,
                &:focus-within {
                    .msk-tag-container {
                        padding: 6px 8px;
                    }
                }
            }
        }

        &.#{$prefix}--tag--sm {
            align-items: center;
            border-radius: 4px;
            border-width: 2px;
            justify-content: center;

            .msk-tag-container {
                padding: 1px 8px;
            }

            &:focus {
                .msk-tag-container {
                    padding: 0 7px;
                }
            }

            &.#{$prefix}--tag--filter {
                padding: 0;

                .msk-tag-container {
                    padding: 1px 8px;
                }

                .#{$prefix}--tag__close__container {
                    height: 34px;
                    width: 34px;
                }
            }

            &.#{$prefix}--tag--disabled {
                &:focus,
                &:focus-within {
                    .msk-tag-container {
                        padding: 1px 8px;
                    }
                }
            }
        }
    }
}

@mixin msk-tag-theme-v2(
    $bg-color,
    $text-color,
    $border-color,
    $bg-color-hover,
    $text-color-hover,
    $border-color-hover,
    $bg-color-active,
    $text-color-active,
    $border-color-active
) {
    background-color: $bg-color;
    color: $text-color;
    box-shadow: inset 0 0 0 m.msk-rem(2px) $border-color;

    transition-property: background-color, color, box-shadow;
    transition-duration: 110ms;
    transition-timing-function: ease-in-out;

    .msk-tag-v2--close-btn,
    &.msk-tag-v2--interactive {
        &:hover:not([disabled]) {
            box-shadow: inset 0 0 0 m.msk-rem(2px) $border-color-hover;
            color: $text-color-hover;
            background-color: $bg-color-hover;
        }

        &:focus:not([disabled]),
        &:focus:hover:not([disabled]) {
            box-shadow: inset 0 0 0 m.msk-rem(2px)
                    tk.$msk--color-border-focus-outer,
                inset 0 0 0 m.msk-rem(3px) tk.$msk--color-border-focus-inner;
        }

        &:focus:not([disabled]) {
            color: $text-color-hover;
            background-color: $bg-color-hover;
        }

        &:active:not([disabled]) {
            box-shadow: inset 0 0 0 m.msk-rem(2px) $border-color-active;
            color: $text-color-active;
            background-color: $bg-color-active;
        }
    }
}

@mixin msk-tag-v2 {
    .msk-tag-v2 {
        .msk-tag-v2--content {
            @include m.msk-type-style(p);
        }

        display: inline-flex;
        align-items: stretch;
        border-radius: m.msk-rem(4px);

        &.msk-tag-v2--single,
        .msk-tag-v2--content-container {
            border: none;
            display: inline-flex;
            align-items: center;
            padding-inline: m.msk-rem(8px);
        }

        /* Interactive tags */
        &.msk-tag-v2--interactive {
            &.msk-tag-v2--single,
            .msk-tag-v2--content-container {
                cursor: pointer;
            }
        }

        /* Tag sizes */
        &.msk-tag-v2--size-sm {
            &.msk-tag-v2--single,
            .msk-tag-v2--content-container {
                padding-block: 0;
            }
        }

        &.msk-tag-v2--size-md {
            &.msk-tag-v2--single,
            .msk-tag-v2--content-container {
                padding-block: m.msk-rem(2px);
            }
        }

        &.msk-tag-v2--size-lg {
            &.msk-tag-v2--single,
            .msk-tag-v2--content-container {
                padding-block: m.msk-rem(6px);
            }
        }

        .msk-tag--icon-left {
            margin-right: m.msk-rem(8px);
        }

        .msk-tag-v2--close-btn {
            transition-property: background-color, color, box-shadow;
            transition-duration: 110ms;
            transition-timing-function: ease-in-out;
            border: none;
            padding: 0;
            background-color: transparent;
            color: inherit;
            align-items: center;
            display: flex;
            padding-inline: m.msk-rem(6px);
            border-top-right-radius: m.msk-rem(4px);
            border-bottom-right-radius: m.msk-rem(4px);
            cursor: pointer;
        }
    }

    .msk-tag-v2.msk-tag-v2--disabled {
        background-color: tk.$msk--color-bg-disabled;
        box-shadow: inset 0 0 0 m.msk-rem(2px) tk.$msk--color-bg-disabled;
        color: tk.$msk--color-content-disabled;
        &.msk-tag-v2--interactive.msk-tag-v2--single,
        .msk-tag-v2--close-btn {
            cursor: not-allowed;
        }
    }

    /*-----Color Variants-----*/
    .msk-tag-v2,
    .msk-tag-v2--content-container {
        &.msk-tag-v2--gray {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-gray,
                tk.$msk--color-content-tag-gray,
                tk.$msk--color-border-tag-gray,
                tk.$msk--color-bg-tag-gray-hover,
                tk.$msk--color-content-tag-gray-hover,
                tk.$msk--color-border-tag-gray-hover,
                tk.$msk--color-bg-tag-gray-active,
                tk.$msk--color-content-tag-gray-active,
                tk.$msk--color-border-tag-gray-active
            );
        }
        &.msk-tag-v2--red {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-red,
                tk.$msk--color-content-tag-red,
                tk.$msk--color-border-tag-red,
                tk.$msk--color-bg-tag-red-hover,
                tk.$msk--color-content-tag-red-hover,
                tk.$msk--color-border-tag-red-hover,
                tk.$msk--color-bg-tag-red-active,
                tk.$msk--color-content-tag-red-active,
                tk.$msk--color-border-tag-red-active
            );
        }
        &.msk-tag-v2--magenta {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-magenta,
                tk.$msk--color-content-tag-magenta,
                tk.$msk--color-border-tag-magenta,
                tk.$msk--color-bg-tag-magenta-hover,
                tk.$msk--color-content-tag-magenta-hover,
                tk.$msk--color-border-tag-magenta-hover,
                tk.$msk--color-bg-tag-magenta-active,
                tk.$msk--color-content-tag-magenta-active,
                tk.$msk--color-border-tag-magenta-active
            );
        }
        &.msk-tag-v2--purple {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-purple,
                tk.$msk--color-content-tag-purple,
                tk.$msk--color-border-tag-purple,
                tk.$msk--color-bg-tag-purple-hover,
                tk.$msk--color-content-tag-purple-hover,
                tk.$msk--color-border-tag-purple-hover,
                tk.$msk--color-bg-tag-purple-active,
                tk.$msk--color-content-tag-purple-active,
                tk.$msk--color-border-tag-purple-active
            );
        }
        &.msk-tag-v2--blue {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-blue,
                tk.$msk--color-content-tag-blue,
                tk.$msk--color-border-tag-blue,
                tk.$msk--color-bg-tag-blue-hover,
                tk.$msk--color-content-tag-blue-hover,
                tk.$msk--color-border-tag-blue-hover,
                tk.$msk--color-bg-tag-blue-active,
                tk.$msk--color-content-tag-blue-active,
                tk.$msk--color-border-tag-blue-active
            );
        }
        &.msk-tag-v2--cyan {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-cyan,
                tk.$msk--color-content-tag-cyan,
                tk.$msk--color-border-tag-cyan,
                tk.$msk--color-bg-tag-cyan-hover,
                tk.$msk--color-content-tag-cyan-hover,
                tk.$msk--color-border-tag-cyan-hover,
                tk.$msk--color-bg-tag-cyan-active,
                tk.$msk--color-content-tag-cyan-active,
                tk.$msk--color-border-tag-cyan-active
            );
        }
        &.msk-tag-v2--teal {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-teal,
                tk.$msk--color-content-tag-teal,
                tk.$msk--color-border-tag-teal,
                tk.$msk--color-bg-tag-teal-hover,
                tk.$msk--color-content-tag-teal-hover,
                tk.$msk--color-border-tag-teal-hover,
                tk.$msk--color-bg-tag-teal-active,
                tk.$msk--color-content-tag-teal-active,
                tk.$msk--color-border-tag-teal-active
            );
        }
        &.msk-tag-v2--green {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-green,
                tk.$msk--color-content-tag-green,
                tk.$msk--color-border-tag-green,
                tk.$msk--color-bg-tag-green-hover,
                tk.$msk--color-content-tag-green-hover,
                tk.$msk--color-border-tag-green-hover,
                tk.$msk--color-bg-tag-green-active,
                tk.$msk--color-content-tag-green-active,
                tk.$msk--color-border-tag-green-active
            );
        }
        &.msk-tag-v2--cool-gray {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-cool-gray,
                tk.$msk--color-content-tag-cool-gray,
                tk.$msk--color-border-tag-cool-gray,
                tk.$msk--color-bg-tag-cool-gray-hover,
                tk.$msk--color-content-tag-cool-gray-hover,
                tk.$msk--color-border-tag-cool-gray-hover,
                tk.$msk--color-bg-tag-cool-gray-active,
                tk.$msk--color-content-tag-cool-gray-active,
                tk.$msk--color-border-tag-cool-gray-active
            );
        }
        &.msk-tag-v2--warm-gray {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-warm-gray,
                tk.$msk--color-content-tag-warm-gray,
                tk.$msk--color-border-tag-warm-gray,
                tk.$msk--color-bg-tag-warm-gray-hover,
                tk.$msk--color-content-tag-warm-gray-hover,
                tk.$msk--color-border-tag-warm-gray-hover,
                tk.$msk--color-bg-tag-warm-gray-active,
                tk.$msk--color-content-tag-warm-gray-active,
                tk.$msk--color-border-tag-warm-gray-active
            );
        }
        &.msk-tag-v2--high-contrast {
            @include msk-tag-theme-v2(
                tk.$msk--color-bg-tag-high-contrast,
                tk.$msk--color-content-tag-high-contrast,
                tk.$msk--color-border-tag-high-contrast,
                tk.$msk--color-bg-tag-high-contrast-hover,
                tk.$msk--color-content-tag-high-contrast-hover,
                tk.$msk--color-border-tag-high-contrast-hover,
                tk.$msk--color-bg-tag-high-contrast-active,
                tk.$msk--color-content-tag-high-contrast-active,
                tk.$msk--color-border-tag-high-contrast-active
            );
        }
        &.msk-tag-v2--outline {
            @include msk-tag-theme-v2(
                transparent,
                tk.$msk--color-content-tag-outline,
                tk.$msk--color-border-tag-outline,
                tk.$msk--color-bg-tag-outline-hover,
                tk.$msk--color-content-tag-outline-hover,
                tk.$msk--color-border-tag-outline-hover,
                tk.$msk--color-bg-tag-outline-active,
                tk.$msk--color-content-tag-outline-active,
                tk.$msk--color-border-tag-outline-active
            );
        }
        &.msk-tag-v2--ghost {
            @include msk-tag-theme-v2(
                transparent,
                tk.$msk--color-content-action-secondary,
                transparent,
                tk.$msk--color-bg-action-hover,
                tk.$msk--color-content-action-secondary-hover,
                transparent,
                tk.$msk--color-bg-action-active,
                tk.$msk--color-content-action-secondary-active,
                transparent
            );
        }
    }
}