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

@mixin kbq-tree-select-theme() {
    .kbq-tree-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-error-default);

            .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-tree-select__panel {
        box-shadow: var(--kbq-select-panel-dropdown-shadow);
        background: var(--kbq-select-panel-dropdown-background);

        .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled) {
            &:hover:not(.kbq-focused),
            &.kbq-hovered:not(.kbq-focused) {
                @include tree-theme.kbq-tree-option(default);
            }

            &.kbq-focused {
                @include tree-theme.kbq-tree-option(states-hover);
            }

            &.kbq-selected {
                &:hover:not(.kbq-focused),
                &.kbq-hovered:not(.kbq-focused) {
                    @include tree-theme.kbq-tree-option(states-selected);
                }

                &.kbq-focused {
                    @include tree-theme.kbq-tree-option(states-selected-hover);
                }
            }

            &.kbq-checked:not(.kbq-selected),
            &.kbq-tree-option_multiple.kbq-selected {
                &:hover:not(.kbq-focused),
                &.kbq-hovered:not(.kbq-focused) {
                    background: var(--kbq-tree-multiple-states-selected-container-background);
                }

                &.kbq-focused {
                    background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                }
            }

            &.kbq-focused:not(.kbq-action-button-focused) {
                border-color: transparent;
            }
        }

        & .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-tree-select-typography() {
    .kbq-tree-select,
    .kbq-tree-select__panel {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
    }
}