/* iOS-style toggle switch */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--spacingHorizontalS);

    /* Hide the native checkbox */
    input[type="checkbox"] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;

        /* Checked state: brand track */
        &:checked + .track {
            background-color: var(--colorBrandBackground);
            border-color: var(--colorBrandBackground);
        }

        /* Checked state: white thumb + slide right */
        &:checked + .track .thumb {
            background-color: var(--colorNeutralBackground1);
            transform: translateX(16px) translateY(-50%);
        }

        /* Disabled state */
        &:disabled + .track {
            background-color: var(--colorNeutralBackgroundDisabled);
            border-color: var(--colorNeutralStrokeDisabled);
        }

        &:disabled + .track .thumb {
            background-color: var(--colorNeutralForegroundDisabled);
        }
    }

    /* Track (pill background) — height matches radio --size (16px), width 2× */
    .track {
        display: inline-block;
        position: relative;
        width: 32px;
        height: 16px;
        background-color: var(--colorNeutralBackground1);
        border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
        border-radius: var(--borderRadiusCircular);
        transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    /* Thumb — 12px circle, vertically centered */
    .thumb {
        position: absolute;
        top: 50%;
        left: 2px;
        width: 12px;
        height: 12px;
        background-color: var(--colorNeutralStrokeAccessible);
        border-radius: var(--borderRadiusCircular);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        transform: translateY(-50%);
        transition: transform 0.25s ease, background-color 0.25s ease;
    }

    /* Hover */
    &:not(.invalid):hover input[type="checkbox"]:not(:disabled):not(:checked):not(.invalid):not(:invalid) + .track {
        border-color: var(--colorNeutralStrokeAccessibleHover);
    }

    &:not(.invalid):hover input[type="checkbox"]:not(:disabled):checked:not(.invalid):not(:invalid) + .track {
        background-color: var(--colorBrandBackgroundHover);
        border-color: var(--colorBrandBackgroundHover);
    }

    /* Pressed — unchecked */
    &:active input[type="checkbox"]:not(:disabled):not(:checked) + .track {
        border-color: var(--colorNeutralStrokeAccessiblePressed);
    }

    /* Pressed — checked */
    &:active input[type="checkbox"]:not(:disabled):checked + .track {
        background-color: var(--colorBrandBackgroundPressed);
        border-color: var(--colorBrandBackgroundPressed);
    }

    /* Focus visible — keyboard navigation */
    input[type="checkbox"]:focus-visible + .track {
        outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
        outline-offset: 2px;
    }

    /* Disabled state */
    &:has(input[type="checkbox"]:disabled) {
        pointer-events: none;
    }

    /* Invalid state — for blazor .invalid and css :invalid */
    &.invalid .track,
    input[type="checkbox"].invalid + .track,
    input[type="checkbox"]:invalid + .track {
        border-color: var(--colorPaletteRedBorder2);
    }
}