.umb-radiobuttons{
    &__label{
        position: relative;
        padding: 0;

        &-text{
            margin: 0 0 0 32px;
            position: relative;
            top: 1px;
        }
    }

    &__input{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;

        &:focus ~ .umb-radiobuttons__state{
            box-shadow: 0 1px 3px fade(@black, 12%), 0 1px 2px fade(@black, 24%);
        }

        &:focus:checked ~ .umb-radiobuttons__state{
            box-shadow: none;
        }

        &:checked ~ .umb-radiobuttons__state{
            &:before{
                width: 100%;
                height: 100%;
            }
        }

        &:checked ~ .umb-radiobuttons__state .umb-radiobuttons__icon{
            opacity: 1;
        }
    }

    &__state{
        display: flex;
        flex-wrap: wrap;
        border: 1px solid @gray-8;
        border-radius: 100%;
        width: 22px;
        height: 22px;
        position: relative;

        &:before{
            content: "";
            background: @green;
            width: 0;
            height: 0;
            transition: .1s ease-out;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 100%;
        }
    }

    &__icon{
        color: @white;
        text-align: center;
        font-size: 15px;
        opacity: 0;
        transition: .3s ease-out;

        &:before{
            position: absolute;
            top: 2px;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }
    }
}