.radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

/* hide the default radio */
.radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* stack SVGs */
.icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* default state: show unchecked */
.checked {
    display: none;
}

/* swap when checked */
.radio input:checked + .unchecked {
    display: none;
}

.radio input:checked + .unchecked + .checked {
    display: block;
}