@use '../styles/common/tokens' as *;

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

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

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

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

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

        &.kbq-active:not(.kbq-disabled) {
            @include kbq-option(states-hover);
        }

        &.kbq-selected:not(.kbq-disabled) {
            @include kbq-option(states-selected);

            &.kbq-active {
                @include kbq-option(states-selected-hover);
            }
        }

        &.kbq-disabled {
            @include kbq-option(states-disabled);
        }

        &:is(.kbq-selected, .kbq-active):has(+ :is(.kbq-selected, .kbq-active)) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:is(.kbq-selected, .kbq-active) + :is(.kbq-selected, .kbq-active) {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }

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

            &.kbq-active {
                @include kbq-option(multiple-states-selected-hover);
            }
        }
    }
}

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

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