.radioButton {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--surface-border-placeholder, #bbb);
    border-radius: 50%;
    background: var(--surface-container-main, #fff);
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}

/* Hide inner dot by default */
.radioButton::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--surface-text-main);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s;
}

.active .radioButton, .radioButton.active {
    border-color: var(--surface-text-main);
}


/* Show inner dot if the parent has .active */
.active .radioButton::after, .radioButton.active::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--surface-text-main);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.15s;
}