.c-checkbox {

    $state--selected-color = $color--main;
    $state--hover-color = #1b68ff;
    $transition = .2s ease-out;

    &__label {
        display: flex;
        transition: $transition;
        cursor: pointer;

        &:hover {
            color: $state--hover-color;
            .c-checkbox__box {
                color: @color;
            }
        }
    }
    
    &__input {
        position: absolute;
        opacity: 0;

        check-checkbox($state--selected-color);

        focus-checkbox($state--hover-color);
    }

    &__box {
        display: inline-block;
        width: 24px;
        height: @width;
        border: solid 1px currentColor;
        border-radius: 4px;
        padding: 3px;
        margin-right: 10px;
        vertical-align: -.125em;
        font-size: 16px;
        color: $color--gray-1;
        transition: border-color $transition, color $transition;
    }

    &__check {
        opacity: 0;
        transform: scale(.3);
        transition: $transition;
    }

    &__txt {
        line-height: 24px;
    }
}