:root {
--color-check-positive: #4CAF50;
--color-check-negative: #DB4040;
}
/* -----------------------------------------
Basic reset / helper for the label
----------------------------------------- */
.toggle-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;            /* hand cursor on hover */
}

/* -----------------------------------------
Hide the native checkbox – but keep it in the DOM
----------------------------------------- */
.toggle-label input[type="checkbox"] {
    /* keep it focusable & selectable */
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

/* -----------------------------------------
Toggle “track” (the background)
----------------------------------------- */
.toggle-background {
    /* size */
    width: 50px;
    height: 24px;
    /* round shape */
    border-radius: 12px;
    /* default background – “off” */
    background: var(--color-check-negative);
    /* animation */
    transition: background 0.3s ease;
    /* stacking context for the knob */
    position: relative;
    /* space between toggle & label text */
    margin-right: 8px;
}

/* -----------------------------------------
Toggle “handle” (the knob)
----------------------------------------- */
.toggle-handle {
    /* size of the knob */
    width: 20px;
    height: 20px;
    /* round */
    border-radius: 50%;
    /* colour */
    background: #e0e0e0;
    /* absolute inside the track */
    position: absolute;
    top: 2px;
    left: 2px;
    /* animate movement */
    transition: transform 0.3s ease;
    /* use the native border‑box rule for a clean edge */
    box-sizing: border-box;
}

/* -----------------------------------------
Checked state – change colour + move knob + replace ✖ and ✔ for red green colorblindness mitigation
----------------------------------------- */
.toggle-label input:checked + .toggle-background {
    background: var(--color-check-positive);                  /* “on” colour */
}
.toggle-label input + .toggle-background::after {
    content: "✖";
    margin-left: 50%;
    color: #e0e0e0;
}
.toggle-label input:checked + .toggle-background::after {
    content: "✔";
    margin-left: 20%;
}
.toggle-label input:checked + .toggle-background .toggle-handle {
    /* shift 26 px to the right:
    track width (50) – knob width (20) – 2×margin (4) = 26 */
transform: translateX(26px);
}

/* -----------------------------------------
Focus styling – a nice blue outline
----------------------------------------- */
.toggle-label input:focus + .toggle-background,
.toggle-label input:focus-visible + .toggle-background {
    outline: 4px solid blue;
    outline-offset: 2px;
}