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

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

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

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

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

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

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

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

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