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

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

    .control-container:not(.toggle-button) > input[type="checkbox"]:checked {
        background-color: var(--brand-primary-blue);
        border-color: var(--brand-primary-blue);
    }

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

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

        .control-container:not(.toggle-button) > input[type="checkbox"]:checked::before {
            content: "✔";
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 1px;
        }