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

@mixin _kbq-toggle-state($type, $state-name) {
    $base: toggle-#{$type}-#{$state-name};

    .kbq-toggle-bar {
        border-color: var(--kbq-#{$base}-border);
        background: var(--kbq-#{$base}-background);
    }

    .kbq-toggle__circle {
        background: var(--kbq-#{$base}-circle-background);
    }
}

@mixin _kbq-toggle-color($type) {
    @include _kbq-toggle-state($type, default);

    &:is(:hover, .kbq-hovered) {
        @include _kbq-toggle-state($type, states-hover);
    }

    &.kbq-active,
    &.kbq-indeterminate {
        @include _kbq-toggle-state($type, states-checked);

        &:is(:hover, .kbq-hovered) {
            @include _kbq-toggle-state($type, states-checked-hover);
        }
    }

    &.cdk-keyboard-focused {
        @include _kbq-toggle-state($type, states-focused);

        & .kbq-toggle-bar {
            border-color: var(--kbq-toggle-#{$type}-states-focused-focus-outline);
            box-shadow: 0 0 0.1px 1px var(--kbq-toggle-#{$type}-states-focused-focus-outline);
        }
    }

    &.kbq-active.cdk-keyboard-focused,
    &.kbq-indeterminate.cdk-keyboard-focused {
        @include _kbq-toggle-state($type, states-checked-focused);

        & .kbq-toggle-bar {
            border-color: var(--kbq-toggle-#{$type}-states-checked-focused-focus-outline);
            box-shadow: 0 0 0.1px 1px var(--kbq-toggle-#{$type}-states-checked-focused-focus-outline);
        }
    }

    &.kbq-disabled {
        @include _kbq-toggle-state($type, states-disabled);
    }

    &.kbq-active.kbq-disabled,
    &.kbq-indeterminate.kbq-disabled {
        @include _kbq-toggle-state($type, states-active-disabled);

        .kbq-toggle-bar {
            opacity: var(--kbq-opacity-disabled);
        }
    }
}

@mixin kbq-toggle-theme() {
    .kbq-toggle {
        @include _kbq-toggle-color(theme);

        &.kbq-error {
            @include _kbq-toggle-color(error);
        }

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

            .kbq-hint .kbq-hint__text {
                color: inherit;
            }
        }

        .kbq-toggle-bar {
            .kbq-toggle__thumb {
                background: var(--kbq-icon-white);
            }
        }

        .kbq-hint .kbq-hint__text {
            color: var(--kbq-foreground-contrast-secondary);
        }
    }
}

@mixin kbq-toggle-typography() {
    .kbq-toggle:not(.kbq-toggle_big) {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);

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

        & .kbq-toggle-bar-container {
            @include tokens.kbq-css-font-variable(typography, text-compact, line-height, '');
        }
    }

    .kbq-toggle.kbq-toggle_big {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);

        & .kbq-hint .kbq-hint__text {
            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
        }

        & .kbq-toggle-bar-container {
            @include tokens.kbq-css-font-variable(typography, text-big, line-height, '');
        }
    }
}