/*
 * Toggle — visual layer
 * Behavior: core/components/c-interactive.css + etch-alpine.js
 * Flat selectors only — nested &__ breaks when nesting is unsupported.
 */

.c-toggle {
    --toggle-switch-w: 2.25rem;
    --toggle-switch-h: 1.5rem;
    --toggle-thumb-size: 1rem;
    --toggle-thumb-offset: 2px;
    --toggle-thumb-travel: calc(var(--toggle-switch-w) - var(--toggle-thumb-size) - var(--toggle-thumb-offset));

    align-items: center;
    display: inline-flex;
    gap: var(--gap-15);
    min-block-size: 32px;
    min-width: 0;
}

.c-toggle__label {
    color: var(--mode-headline-color);
    cursor: pointer;
    font-size: var(--body-font);
    font-weight: var(--weight-body);
    line-height: var(--line-height-body);
    user-select: none;
}

.c-toggle__switch {
    align-items: center;
    background: var(--mode-opacity-5);
    border: none;
    border-radius: var(--radius-badge);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--toggle-switch-h);
    justify-content: flex-start;
    padding: 0;
    position: relative;
    transition: background-color var(--time-in) var(--bezier-in);
    width: var(--toggle-switch-w);
}

.c-toggle__switch:focus:not(:focus-visible) {
    outline: none;
}

.c-toggle__switch:focus-visible {
    outline: var(--border-marker) solid var(--mode-active);
    outline-offset: 2px;
}

.c-toggle__switch[aria-checked='true'] {
    background: var(--mode-active);
}

.c-toggle__thumb {
    background: var(--mode-reverse);
    border-radius: var(--radius-badge);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--mode) 18%, transparent);
    display: block;
    height: var(--toggle-thumb-size);
    pointer-events: none;
    transform: translateX(var(--toggle-thumb-offset));
    transition: transform var(--time-out) var(--bezier-out);
    width: var(--toggle-thumb-size);
}

.c-toggle__switch[aria-checked='true'] .c-toggle__thumb,
.c-toggle.is-on .c-toggle__thumb {
    transform: translateX(var(--toggle-thumb-travel));
}

.c-toggle.is-on .c-toggle__switch,
.c-toggle__switch[aria-checked='true'] {
    background: var(--mode-reverse);
}

.c-toggle.is-on .c-toggle__switch .c-toggle__thumb,
.c-toggle__switch[aria-checked='true'] .c-toggle__thumb {
    background: var(--mode);
}

@media (prefers-reduced-motion: reduce) {
    .c-toggle__thumb {
        transition: none;
    }
}