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

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

    .kbq-icon.kbq-empty:not(.kbq-icon-button, .kbq-icon-item) {
        color: var(--kbq-list-#{$style-name}-text-color);
    }
}

@mixin kbq-dropdown-theme() {
    .kbq-dropdown__panel {
        box-shadow: var(--kbq-dropdown-container-shadow);
        background: var(--kbq-dropdown-container-background);
    }

    .kbq-dropdown-item {
        @include _kbq-dropdown-item-state(default);

        .kbq-dropdown-item__caption {
            color: var(--kbq-dropdown-item-caption-color);
        }

        &.kbq-dropdown-item_highlighted,
        &.cdk-focused:not(.kbq-disabled) {
            @include _kbq-dropdown-item-state(states-hover);
        }

        &.kbq-selected {
            @include _kbq-dropdown-item-state(states-selected);

            &.cdk-focused:not(.kbq-disabled) {
                @include _kbq-dropdown-item-state(states-selected-hover);
            }
        }

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

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

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

    .kbq-dropdown__group-header {
        // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
        &.kbq-dropdown__group-header_small {
            color: var(--kbq-foreground-contrast-secondary);
        }
    }

    .kbq-dropdown-item-overlay {
        background: transparent;
    }
}

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

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

    .kbq-dropdown__group-header {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, big-strong);

        // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
        &.kbq-dropdown__group-header_small {
            @include tokens.kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
        }
    }
}