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

@mixin kbq-checkbox-color($style-name) {
    $base: checkbox-#{$style-name};

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

        & .kbq-checkbox-checkmark,
        & .kbq-checkbox-mixedmark {
            color: var(--kbq-#{$base}-default-color);
        }
    }

    .kbq-checkbox-label {
        color: var(--kbq-#{$base}-default-text);
    }

    & .kbq-hint .kbq-hint__text {
        color: var(--kbq-#{$base}-default-caption);
    }

    &:hover,
    &.kbq-hover {
        .kbq-checkbox__frame {
            border-color: var(--kbq-#{$base}-states-hover-border);
            background-color: var(--kbq-#{$base}-states-hover-background);
        }
    }

    &.kbq-checked,
    &.kbq-indeterminate {
        .kbq-checkbox__frame {
            border-color: var(--kbq-#{$base}-states-checked-border);
            background-color: var(--kbq-#{$base}-states-checked-background);
        }
    }

    &.kbq-checked:not(.kbq-disabled),
    &.kbq-indeterminate:not(.kbq-disabled) {
        &:hover,
        &.kbq-hover {
            .kbq-checkbox__frame {
                border-color: var(--kbq-#{$base}-states-checked-hover-border);
                background-color: var(--kbq-#{$base}-states-checked-hover-background);
            }
        }

        & .kbq-checkbox-input.cdk-keyboard-focused {
            + .kbq-checkbox__frame {
                border-color: var(--kbq-#{$base}-states-checked-focused-border);
                background-color: var(--kbq-#{$base}-states-checked-focused-background);
                outline: var(--kbq-#{$base}-states-checked-focused-outline);
            }
        }
    }

    & .kbq-checkbox-input.cdk-keyboard-focused {
        + .kbq-checkbox__frame {
            border-color: var(--kbq-#{$base}-states-focused-border);
            background-color: var(--kbq-#{$base}-states-focused-background);
            outline: var(--kbq-#{$base}-states-focused-outline);
        }
    }

    &.kbq-disabled {
        .kbq-checkbox__frame {
            border-color: var(--kbq-#{$base}-states-disabled-border);
            background-color: var(--kbq-#{$base}-states-disabled-background);

            & .kbq-checkbox-checkmark,
            & .kbq-checkbox-mixedmark {
                color: var(--kbq-#{$base}-states-disabled-color);
            }
        }

        & .kbq-hint .kbq-hint__text {
            color: var(--kbq-#{$base}-states-disabled-caption);
        }

        .kbq-checkbox-label {
            color: var(--kbq-#{$base}-states-disabled-text);
        }
    }
}

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

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

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

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

    .kbq-checkbox.kbq-checkbox_big {
        @include kbq-typography-level-to-styles-css-variables(typography, text-big);

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