.atm-form-radiobutton {
    @apply relative pl-6;

    .form-radio {
        @apply absolute left-0 text-black  border border-solid border-black-400;
        top: 5px;

        &[disabled] {
            @apply bg-black-100;
        }
    }

    &.text-description {
        .form-label {
            font-size: 20px;
            font-weight: 700;
        }
    }

    .form-radio-label {
        display: flex;
        flex-direction: column;
    }

    .form-radio-label-title {
        font-size: 16px;
        font-weight: 700;

        @screen md {
            font-size: 20px;
        }
    }

    .form-radio-label-description {
    }

    &.radio-inverted {
        @apply text-white;

        padding-left: 36px;

        [type='radio']:checked,
        [type='radio']:not(:checked) {
            position: absolute;
            left: -9999px;
        }

        [type='radio']:checked + label:before,
        [type='radio']:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 22px;
            height: 22px;
            border: 2px solid #ffffff;
            border-radius: 100%;
        }

        [type='radio']:checked + label:after,
        [type='radio']:not(:checked) + label:after {
            @apply bg-white;

            content: '';
            width: 14px;
            height: 14px;
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type='radio']:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        [type='radio']:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
}