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

@mixin kbq-button-toggle-state($state-name) {
    & > .kbq-button,
    & > .kbq-icon-button {
        background: var(--kbq-button-toggle-item-#{$state-name}-background);

        color: var(--kbq-button-toggle-item-#{$state-name}-text);

        & .kbq-icon.kbq-empty {
            color: var(--kbq-button-toggle-item-#{$state-name}-icon);
        }
    }
}

@mixin kbq-button-toggle-theme() {
    .kbq-button-toggle-group {
        background: var(--kbq-button-toggle-container-background);

        .kbq-button-toggle {
            @include kbq-button-toggle-state(default);

            &.kbq-hover:not(.kbq-disabled),
            &:hover:not(.kbq-disabled) {
                @include kbq-button-toggle-state(states-hover);
            }

            &.kbq-active:not(.kbq-disabled),
            &:active:not(.kbq-disabled) {
                @include kbq-button-toggle-state(states-active);
            }

            &.kbq-selected:not(.kbq-disabled) {
                @include kbq-button-toggle-state(states-selected);

                &.kbq-active,
                &:active {
                    @include kbq-button-toggle-state(states-selected-active);
                }
            }

            &.kbq-disabled {
                @include kbq-button-toggle-state(states-disabled);
            }

            &.kbq-disabled.kbq-selected {
                @include kbq-button-toggle-state(states-selected-disabled);
            }

            &.cdk-keyboard-focused {
                border-color: var(--kbq-button-toggle-item-states-focused-outline);
            }
        }
    }
}

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