.radio {
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--widget);
    box-sizing: border-box;

    input {
        display: none;
    }

    label {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        opacity: 0;
        transition: opacity var(--transition);
        cursor: pointer;
        display: block;
    }

    input:checked + label {
        opacity: 1;
    }

    &.light {
        label {
            background-color: var(--grass);
        }
    }

    &.dark {
        label {
            background-color: var(--accent);
        }
    }
}