input[type="radio"] {
    margin: 0;
}

.control-container:not(.toggle-button) input[type="radio"] {
    appearance: none;
    width: var(--control-size);
    height: var(--control-size);
    min-width: var(--control-size);
    min-height: var(--control-size);
    border: var(--control-border-size) solid var(--brand-primary-blue);
    border-radius: 50%;
    position: relative;
}

    .control-container:not(.toggle-button) label:hover ~ input[type="radio"],
    .control-container:not(.toggle-button) input[type="radio"]:hover,
    .control-container:not(.toggle-button) label:focus-visible ~ input[type="radio"],
    .control-container:not(.toggle-button) input[type="radio"]:focus-visible {
        border-color: var(--brand-info-blue);
        outline: var(--brand-info-blue);
    }

    .control-container:not(.toggle-button) input[type="radio"]:checked::before {
        content: "";
        width: calc(var(--control-size) / 2);
        height: calc(var(--control-size) / 2);
        border-radius: 50%;
        background-color: var(--brand-primary-blue);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .control-container:not(.toggle-button) label:hover ~ input[type="radio"]:checked::before,
    .control-container:not(.toggle-button) input[type="radio"]:hover:checked::before,
    .control-container:not(.toggle-button) label:focus-visible ~ input[type="radio"]:checked::before,
    .control-container:not(.toggle-button) input[type="radio"]:focus-visible:checked::before {
        background-color: var(--brand-info-blue);
    }