@use '../core/styles/theming/theming' as *;
@use '../core/styles/typography/typography-utils' as *;
@use '../core/styles/common/tokens' as *;

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

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

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

    .kbq-tree-node-toggle .kbq-icon.kbq-empty,
    .kbq-icon.kbq-empty.kbq-tree-node-toggle {
        color: var(--kbq-tree-#{$state-name}-tree-toggle-color);
    }

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

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

@mixin kbq-tree-theme() {
    .kbq-tree-selection {
        &:focus {
            outline: none;
        }
    }

    .kbq-tree-option {
        @include kbq-tree-option(default);

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

            &.kbq-selected {
                @include kbq-tree-option(states-selected);

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

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

                background: var(--kbq-tree-multiple-states-selected-container-background);

                &:hover,
                &.kbq-hovered {
                    --kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);

                    background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                }
            }
        }

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

            & .kbq-icon.kbq-empty {
                color: var(--kbq-states-icon-disabled);
            }
        }
    }

    .cdk-keyboard-focused {
        & .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused) {
            border-color: var(--kbq-tree-states-focused-focus-outline-color);

            & .kbq-action-container {
                display: flex;
            }
        }
    }
}

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

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