.ons-radio {
    @extend .ons-checkbox;

    &__input {
        @extend .ons-checkbox__input;

        background: var(--ons-color-grey-5);
        border-radius: 50%;
        box-shadow: inset 0 0 0 3px var(--ons-color-input-bg);

        &::after {
            display: none;
        }
        &:checked {
            background-color: var(--ons-color-input-border);
        }
    }

    &.ons-radio--no-border {
        @extend .ons-checkbox--no-border;

        > .ons-radio__input {
            @extend .ons-radio__input;
            &:focus,
            &:checked {
                + .ons-radio__label::before {
                    background: none;
                    border: 0;
                    box-shadow: none;
                    outline: none;
                }
            }

            &:focus {
                box-shadow:
                    inset 0 0 0 3px var(--ons-color-input-bg),
                    0 0 0 $input-border-width var(--ons-color-input-border),
                    0 0 0 4px var(--ons-color-focus);
            }
        }

        .ons-radio__label--with-description {
            padding: 0;
        }
    }

    &__label {
        @extend .ons-checkbox__label;

        &--with-description {
            @extend .ons-checkbox__label--with-description;
        }
    }

    &__description {
        @extend .ons-checkbox__description;
    }

    &__other {
        @extend .ons-checkbox__other;
    }

    &__input:not(:checked) ~ &__other--open {
        display: block;
    }
}