/*
    Styling for toggle switches with no text: a track 32 by 18 pixels, small enough to sit beside the
    header's account name without drawing the eye, and a 12-pixel knob that slides 14 pixels, from
    2 pixels in on the left to 2 pixels in on the right.
*/
.toggle-switch
{
    position: relative;
    width: 32px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--neutral-highest-emphasis-surface-color);
    border-radius: 9px;
    background-color: var(--neutral-medium-emphasis-surface-color);
    cursor: pointer;
    /* The track fills as the knob slides, in the time a button's hover takes. */
    transition: background-color 0.2s;

    /* The knob, at the track's left while off. */
    .toggle-switch-knob
    {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--neutral-surface-medium-emphasis-contrast-color);
        transition: transform 0.2s, background-color 0.2s;
    }

    /* While on, the track fills light and the knob slides right, dark against it. */
    &[aria-checked="true"]
    {
        background-color: var(--neutral-surface-high-emphasis-contrast-color);

        .toggle-switch-knob
        {
            transform: translateX(14px);
            background-color: var(--neutral-medium-emphasis-surface-color);
        }
    }
}

/* Users who ask for less motion see the switch change at once. */
@media (prefers-reduced-motion: reduce)
{
    .toggle-switch,
    .toggle-switch .toggle-switch-knob
    {
        transition: none;
    }
}