.radio {
    &-group {
        @extend .flex-column;

        border-radius: var(--border1);
        border: 1px solid var(--transp-1);
        padding: 0;
        margin: 0;
    }

    &-content {
        @extend .flex-row, .flex-center;

        gap: .8rem;

        &::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            border: 2px solid var(--transp-4);
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            @include transition(border-color);
        }
    }

    &-icon {
        @extend .flex-center;

        border-radius: 25px;
        width: 41px;
        height: 41px;
        font-size: var(--h5);
        flex-shrink: 0;
        color: var(--primary-900);
        background-color: var(--primary);

        @include media(mobile) {
            width: 36px;
            height: 36px;
        }
    }

    &-option {
        @extend .flex-row, .align-center, .blur-bg;

        border-radius: var(--border1);
        padding: 1rem 1rem;
        cursor: pointer;
        position: relative;
        @include transition();

        &:first-of-type {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: 1px solid var(--transp-1);
        }

        &:last-of-type {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        &:not(:last-of-type):not(:first-of-type) {
            border-bottom: 1px solid var(--transp-1);
            border-radius: 0;
        }

        &:hover {
            background-color: var(--transp-1);

            .radio-text-small {
                color: var(--text-300);
            }
        }

        &-content {
            @extend .flex-column;

            width: 100%;
            gap: 2px;
            padding-right: 30px;
        }
    }

    &-text {
        &-label {
            font-weight: 500;
            line-height: 1.4;
            @include transition();
        }

        &-small {
            color: var(--text-400);
            line-height: 1.5;
            @include transition();
        }
    }

    &-input {
        display: none;

        &:checked {
            &+.radio-content::before {
                border-color: var(--accent);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                border-width: 3px;
            }

            &+.radio-content .radio-text-label {
                color: var(--accent);
            }
        }
    }
}