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

@use './pseudo-checkbox-theme' as *;

.kbq-pseudo-checkbox {
    position: relative;
    display: inline-flex;
    box-sizing: border-box;

    align-items: center;
    justify-content: center;

    width: var(--kbq-checkbox-size-normal-width);
    height: var(--kbq-checkbox-size-normal-width);

    border: {
        radius: var(--kbq-checkbox-size-normal-border-radius);
        width: var(--kbq-checkbox-size-normal-border-width);
        style: solid;
    }

    cursor: pointer;

    vertical-align: middle;
    flex-shrink: 0;

    .kbq-checkbox-checkmark,
    .kbq-checkbox-mixedmark {
        display: none;
    }

    &.kbq-pseudo-checkbox-checked,
    &.kbq-pseudo-checkbox-indeterminate {
        border-color: transparent;
    }

    &.kbq-checked {
        .kbq-checkbox-checkmark {
            display: inline-block;
        }
    }

    &.kbq-indeterminate {
        .kbq-checkbox-mixedmark {
            display: inline-block;
        }
    }

    &.kbq-disabled {
        cursor: default;
    }
}

.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big {
    width: var(--kbq-checkbox-size-big-width);
    height: var(--kbq-checkbox-size-big-width);

    border: {
        radius: var(--kbq-checkbox-size-big-border-radius);
        width: var(--kbq-checkbox-size-big-border-width);
    }
}

@include kbq-pseudo-checkbox-theme();