@use '../core/styles/common/tokens' as *;
@use './tag-tokens';

@mixin _kbq-tag-state($type, $style-name) {
    $base: tag-#{$type}-#{$style-name};

    background: var(--kbq-#{$base}-background);

    & .kbq-icon.kbq-empty {
        color: var(--kbq-#{$base}-icon);
    }

    & .kbq-tag__text {
        color: var(--kbq-#{$base}-text);
    }
}

@mixin _kbq-tag-color($type) {
    @include _kbq-tag-state($type, default);

    &:hover,
    &.kbq-hovered {
        @include _kbq-tag-state($type, states-hover);
    }

    &.cdk-keyboard-focused,
    &.kbq-tag_editing {
        @include _kbq-tag-state($type, states-focus);

        outline: 2px solid var(--kbq-tag-#{$type}-states-focus-outline);
    }

    &.kbq-selected:not(.kbq-disabled, .kbq-tag_editing) {
        @include _kbq-tag-state($type, states-selected);

        &.cdk-keyboard-focused {
            box-shadow: inset 0 0 0 var(--kbq-size-border-width) var(--kbq-background-bg);
        }
    }

    // TODO: Combine disabled states for all colors (#DS-3778)
    &.kbq-disabled {
        @include _kbq-tag-state($type, states-disabled);
    }

    &.kbq-tag_editing {
        background-color: var(--kbq-background-bg);
    }

    .kbq-tag-edit-input {
        color: inherit;
    }
}

@mixin kbq-tag-theme() {
    .kbq-tag {
        &.kbq-theme {
            @include _kbq-tag-color(theme-fade-on);
        }

        &.kbq-contrast-fade {
            @include _kbq-tag-color(contrast-fade-on);
        }

        &.kbq-error {
            @include _kbq-tag-color(error-fade-on);
        }

        &.kbq-warning {
            @include _kbq-tag-color(warning-fade);
        }
    }
}

@mixin kbq-tag-typography() {
    .kbq-tag,
    .kbq-tag-edit-input {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
    }

    .kbq-tag-input {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
    }
}