@use '../core/styles/common/popup' as *;
@use '../core/styles/theming/theming' as *;
@use '../core/styles/common/tokens' as *;

@mixin kbq-select-theme() {
    .kbq-select {
        color: var(--kbq-foreground-contrast);

        // Invalid by `KbqValidateDirective`
        &.kbq-control_has-validate-directive.ng-invalid,
        // Invalid by control `ErrorStateMatcher`
        &.kbq-invalid {
            color: var(--kbq-foreground-error);

            .kbq-select__placeholder {
                color: var(--kbq-form-field-states-error-placeholder);
            }
        }

        &.kbq-disabled {
            color: var(--kbq-states-foreground-disabled);

            .kbq-select__placeholder {
                color: var(--kbq-form-field-states-disabled-placeholder);
            }
        }
    }

    .kbq-select__placeholder {
        text-overflow: ellipsis;

        color: var(--kbq-form-field-default-placeholder);
    }

    .kbq-select__panel {
        box-shadow: var(--kbq-select-panel-dropdown-shadow);
        background: var(--kbq-select-panel-dropdown-background);

        & .kbq-select__footer {
            border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
        }
    }

    .kbq-select__search-container {
        border-bottom-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
    }

    .kbq-select__no-options-message {
        color: var(--kbq-foreground-contrast-secondary);
    }
}

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

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