common.css

.radio-input{
    display:none;
}
.radio{
    display:block;
    width:25px;
    height:25px;
    cursor: pointer;
    border-radius: 50%;
    border:3px solid #fff;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.radio::before,
.radio::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    transform:scale(0);
    display: block;
    transition: all 0.1s;
}
.radio::before{
    width:20px;
    height:20px;
    background: #fff;
}
.radio::after{
    width:50px;
    height:50px;
    background: #f7faff4d;
}
.radio-input:checked +
.radio::after {
    animation: ripple 0.2s;
}
.radio-input:checked +
.radio::before {
    transform: scale(1);
}
@keyframes ripple {
    to {
        transform: scale(1);
    }
}