@import '@hh.ru/design-tokens/build/less/variables';
@import '../../common/styles/_abstract-control';
@import '../../common/styles/_checkable-control';

.bloko-checkbox {
    .checkable-control();
}

.bloko-checkbox__input:checked + .bloko-checkbox__text::before,
.bloko-checkbox__input:indeterminate + .bloko-checkbox__text::before {
    border-color: @bloko-color-checkable-checked-border-default;
    background-color: @bloko-color-checkable-checked-background-default;
    background-repeat: no-repeat;
    background-position: 50%;
}

.bloko-checkbox__input:checked + .bloko-checkbox__text::before {
    background-image: url('check.svg?24052022');
    background-position-x: var(--bloko-checkbox-color-image-offset);
}

.bloko-checkbox__input:indeterminate + .bloko-checkbox__text::before {
    background-image: url('indeterminate.svg?24052022');
    background-position-x: var(--bloko-checkbox-color-image-offset);
}

.bloko-checkbox .bloko-checkbox__input:checked:disabled + .bloko-checkbox__text::before,
.bloko-checkbox .bloko-checkbox__input:indeterminate:disabled + .bloko-checkbox__text::before,
.bloko-checkbox:hover .bloko-checkbox__input:checked:disabled + .bloko-checkbox__text::before,
.bloko-checkbox:hover .bloko-checkbox__input:indeterminate:disabled + .bloko-checkbox__text::before {
    background-color: @bloko-color-checkable-checked-background-default;
    border-color: @bloko-color-checkable-checked-border-default;
    opacity: 0.5;
}

.bloko-checkbox:hover .bloko-checkbox__input:checked + .bloko-checkbox__text::before,
.bloko-checkbox:hover .bloko-checkbox__input:indeterminate + .bloko-checkbox__text::before,
.bloko-checkbox__input:checked:focus + .bloko-checkbox__text::before,
.bloko-checkbox__input:checked:active + .bloko-checkbox__text::before,
.bloko-checkbox__input:indeterminate:focus + .bloko-checkbox__text::before,
.bloko-checkbox__input:indeterminate:active + .bloko-checkbox__text::before {
    background-color: @bloko-color-checkable-checked-background-hover;
    border-color: @bloko-color-checkable-checked-border-hover;
}