.c-radio {

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

    display: block;

    &:not(.&--inline) + & {
        margin-top: 10px;
    }

    &--inline {
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 10px;
    }

    &__label {
        line-height: 1.3;
        transition: $transition;
        cursor: pointer;

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

        check-radio-button($state--selected-color);

        focus-radio-button($state--hover-color);
    }

    &__box {
        display: inline-block;
        width: 24px;
        height: @width;
        border: solid 1px currentColor;
        border-radius: 50%;
        float: left;
        margin-right: 10px;
        margin-top: -3px;
        background-color: currentColor;
        box-shadow: inset 0 0 0 (@width / 2) #fff;
        color: $color--gray-1;
        transition: $transition;
    }

    &__check {
        opacity: 0;
        transition: $transition;
    }
}