.aligned ul label.radio {
    display: inline-block;
}
label.radio {
    cursor: pointer;
}
label.radio input {
    display: none;
}
label.radio input + span {
    line-height: 20px;
    padding-left: 20px;
    display: block;
    position: relative;
}
label.radio input + span:not(:empty) {
    padding-left: 30px;
}
label.radio input + span:before,
label.radio input + span:after {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 50%;
    left: 0;
    top: 0;
    position: absolute;
}
label.radio input + span:before {
    background: var(--body-quiet-color);
}
label.radio input + span:after {
    background: var(--body-bg);
    transform: scale(.7);
    transition: transform .3s cubic-bezier(.175, .885, .32, 1.4);
}
label.radio input:checked + span:before {
    transform: scale(1.1);
    background: var(--checkbox-checked-bg-color);
}
label.radio input:checked + span:after {
    transform: scale(0.5);
}

label.radio input:checked:disabled + span:before {
    background: var(--button-bg);
}
label.radio input:disabled + span {
    opacity: 0.6;
    cursor: not-allowed;
}