@use '../core/styles/common/tokens';

@mixin _kbq-list-item($state-name) {
    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);

    background: var(--kbq-list-#{$state-name}-container-background);

    .kbq-list-text {
        color: var(--kbq-list-#{$state-name}-text-color);
    }

    .kbq-icon.kbq-empty {
        color: var(--kbq-list-#{$state-name}-icon-color);
    }

    .kbq-option-action .kbq-icon.kbq-empty {
        color: var(--kbq-list-#{$state-name}-icon-button-color);
    }

    .kbq-list-option-caption {
        color: var(--kbq-list-#{$state-name}-caption-color);
    }
}

@mixin kbq-list-theme() {
    .kbq-list-option {
        @include _kbq-list-item(default);

        &.kbq-hovered:not(.kbq-disabled),
        &:hover:not(.kbq-disabled),
        &.kbq-action-button-focused:not(.kbq-disabled) {
            @include _kbq-list-item(states-hover);
        }

        &.kbq-active:not(.kbq-disabled),
        &:active:not(.kbq-disabled) {
            @include _kbq-list-item(states-active);
        }

        &.kbq-selected:not(.kbq-disabled) {
            @include _kbq-list-item(states-selected);

            &.kbq-hovered,
            &:hover {
                @include _kbq-list-item(states-selected-hover);
            }

            &.kbq-active,
            &:active {
                @include _kbq-list-item(states-selected-active);
            }
        }

        &.kbq-disabled {
            @include _kbq-list-item(states-disabled);
        }
    }

    .kbq-list-option.kbq-list-option_multiple {
        &.kbq-selected:not(.kbq-disabled) {
            @include _kbq-list-item(multiple-states-selected);

            &.kbq-hovered,
            &:hover {
                @include _kbq-list-item(multiple-states-selected-hover);
            }

            &.kbq-active,
            &:active {
                @include _kbq-list-item(multiple-states-selected-active);
            }
        }
    }

    .kbq-list-selection.cdk-keyboard-focused {
        & .kbq-list-option.kbq-focused {
            border-color: var(--kbq-list-states-focused-focus-outline-color);
        }
    }
}

@mixin kbq-list-typography() {
    .kbq-list-item,
    .kbq-list-option {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);

        .kbq-list-text {
            .kbq-list-option-caption {
                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
            }
        }
    }
}