@import '@hh.ru/design-tokens/build/less/variables';
@import 'colors';
@import 'color-utils';
@import '_abstract-control';
@import 'rounded-corner-base';

@checkable-control-size: 20px;
@checkable-control-color: @color-blue-60;
@checkable-control-border-color: @color-gray-40;

.checkable-control-left-indent() {
    margin-left: calc(var(--bloko-checkable-control-size) + var(--bloko-checkable-control-margin-right));
}

/* stylelint-disable selector-nested-pattern */
.checkable-control() {
    .checkable-control-left-indent();

    display: inline-table;
    position: relative;
    padding: var(--bloko-checkable-control-vertical-indent) 0;

    &__text::before {
        content: ' ';
        position: absolute;
        right: 100%;
        display: inline-block;
        box-sizing: border-box;
        width: var(--bloko-checkable-control-size);
        height: var(--bloko-checkable-control-size);
        margin-right: var(--bloko-checkable-control-margin-right);
        top: 0;
        bottom: 0;
        color: @bloko-color-checkable-typography-default;
        border-radius: @bloko-border-radius-checkable;
        background: @bloko-color-checkable-default-background-default;
        border: 1px solid @bloko-color-checkable-default-border-default;
    }

    &__input {
        position: absolute;

        /* Для того, чтобы оставалась возможность попасть tab'ом на input не скрываем его, а используем clip */
        clip: rect(0 0 0 0);
        width: var(--bloko-checkable-control-size);
        height: var(--bloko-checkable-control-size);
    }

    &__text {
        line-height: var(--bloko-checkbox-label-line-height);
        position: relative;
        display: table-cell;
    }

    &:hover &__text::before,
    &__input:focus + &__text::before {
        border-color: @bloko-color-checkable-default-border-hover;
    }

    &__input:active + &__text::before {
        box-shadow: @control-box-shadow-focus;
        border-color: var(--bloko-radio-color-border-focus);
    }

    &__input:global(.focus-visible) + &__text::before {
        .abstract-control-focus-visible();
    }

    &__input:disabled + &__text,
    &:hover &__input:disabled + &__text {
        color: @bloko-color-checkable-typography-disabled;
    }

    &__input:disabled + &__text::before,
    &:hover &__input:disabled + &__text::before {
        background-color: @bloko-color-checkable-default-background-disabled;
        border-color: @bloko-color-checkable-default-border-disabled;
        background-clip: padding-box;
    }

    &__opening-content {
        display: none;
    }

    &__input:checked + &__text &__opening-content {
        display: block;
    }

    &_invalid &__text::before,
    &_invalid:hover &__text::before {
        border-color: @bloko-color-checkable-default-border-invalid;
    }

    &_invalid &__input:disabled:not(:checked) + &__text::before {
        border-color: @bloko-color-checkable-default-border-invalid;
        opacity: 0.5;
    }

    &:hover &__input:not(:checked):disabled + &__text::before {
        border-color: @bloko-color-checkable-default-border-disabled;
    }
}

.checkable-control-reversed-wrapper() {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bloko-radio {
        .checkable-control-reversed();
    }

    &__control {
        display: inline-flex;
        margin-top: calc(0px - var(--bloko-checkable-control-size));
    }
}

.checkable-control-reversed() {
    padding: 0;

    &__text::before {
        margin-right: 0;
    }

    &__input {
        right: 0;
    }
}
/* stylelint-enable */