.track_Om7QP {
    /* component variables */
    --thumb-height: 20px;
    --thumb-width: 20px;
    --track-width: 36px;
    --track-height: 20px;
    --color-track-background: var(--sp-color-border-base);
    /* end component variables */
    background-color: var(--color-track-background);
    border-radius: var(--sp-radius-pill);
    cursor: pointer;
    height: var(--track-height);
    margin: auto;
    position: relative;
    width: var(--track-width);
}

.track_Om7QP[data-state='disabled'] {
    cursor: not-allowed;
}

.track_Om7QP[data-state='checked'] {
    --color-track-background: var(--sp-color-action-bg-primary-default);
}

/*
 * For accessibility we use an input[type=checkbox] that is visually hidden
 * with opacity set to 0. We can use the input for associated label, state, focus and keyboard 
 * controls.
 * 
 * We keep it physically in the page so a non-visual user scanning via touch 
 * on mobile with a screen reader will be able to find the element.
 */
.input_zN40o {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: inherit;
    margin: 0;
    padding: 0;
}

/**
 * Using a .thumb::after pseudo-element for the thumb so it can rotate and 
 * transition independently of the focus ring in .thumb::before
 */
.thumb_KlVqb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border: 3px solid var(--color-track-background);
    border-radius: var(--sp-radius-circle);
    height: var(--thumb-height);
    width: var(--thumb-width);
    transition: translate 0.1s;
}

[data-state='loading'] .thumb_KlVqb::after {
    border-top-color: var(--sp-color-action-bg-primary-default);
    animation: rotate_l0Avy 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation-delay: 0.1s;
}

.input_zN40o:checked + .thumb_KlVqb::after {
    translate: calc(var(--track-width) - var(--thumb-width)) 0;
}

/**
 * Using a pseudo-element for the focus ring so we can make use of
 * the :focus-visible state of the input
 * 
 * @todo Simplify by adding the focus-ring to .track with :has?
 */
.input_zN40o:focus-visible + .thumb_KlVqb::before {
    border-radius: var(--sp-radius-pill);
    box-shadow: var(--sp-focus-ring);
    content: '';
    height: var(--track-height);
    left: 0;
    outline: transparent solid 2px;
    position: absolute;
    top: 0;
    width: var(--track-width);
}

@keyframes rotate_l0Avy {
    to {
        transform: rotate(360deg);
    }
}