/* ==========================================================================
   SlicePost shared toggles

   The checkbox remains the source of truth for form-backed controls. The
   track/thumb are only the visual layer, so existing editor and caption
   handlers keep reading the same checked values. Posting uses the same
   component in button mode with data-on/aria-checked.
   ========================================================================== */
:root {
    --toggle-dur: 350ms;
    --toggle-travel: 14.66px;
    --toggle-ov1: 1px;
    --toggle-ov2: 0px;
    /* A short independent clock keeps the track from snapping as abruptly as
       the old switch while leaving the thumb's double-bounce at 350ms. */
    --toggle-track: 140ms;
    --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
}

/* Light theme: a pale off track made the switch and its pale thumb nearly
   invisible on white, and slider rails (built for the dark theme) vanished
   the same way. A mid-gray track keeps the off state and the unfilled part
   of a slider at least 3:1 against the page and against a white thumb. The
   on state and the filled part are unchanged. */
html[data-theme="light"] {
    --toggle-off-track: #848d97;
    --toggle-off-border: #848d97;
    --toggle-thumb: #fff;
    --toggle-thumb-shadow: 0 1px 2px rgba(16, 22, 30, 0.3);
    --range-rest: #848d97;
}

html[data-theme="light"] .dual-range-rail {
    background: var(--range-rest);
}

html[data-theme="light"] .output-mini-range::-webkit-slider-runnable-track {
    background: var(--range-rest);
}

html[data-theme="light"] .output-mini-range::-moz-range-track {
    background: var(--range-rest);
}

.t-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--toggle-off-border, var(--v2-border-strong, rgba(255, 255, 255, 0.14)));
    border-radius: 999px;
    background: var(--toggle-off-track, var(--v2-slate-3, #262c32));
    color: transparent;
    cursor: pointer;
    transition:
        background var(--toggle-track) var(--toggle-ease),
        border-color var(--toggle-track) var(--toggle-ease),
        box-shadow var(--toggle-track) var(--toggle-ease),
        opacity 150ms ease;
}

.t-toggle[data-on="true"],
.t-toggle[aria-checked="true"],
.t-toggle:has(> input[type="checkbox"]:checked) {
    background: var(--v2-blue, #1014ef);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.t-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--toggle-thumb, #eef2f7);
    box-shadow: var(--toggle-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.35));
    translate: 0 0;
    will-change: translate;
    pointer-events: none;
}

.t-toggle[data-on="true"] .t-toggle-thumb,
.t-toggle[aria-checked="true"] .t-toggle-thumb,
.t-toggle:has(> input[type="checkbox"]:checked) .t-toggle-thumb {
    translate: var(--toggle-travel) 0;
}

.t-toggle.is-init[data-on="true"] .t-toggle-thumb,
.t-toggle.is-init[aria-checked="true"] .t-toggle-thumb {
    animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both;
}

.t-toggle.is-init[data-on="false"] .t-toggle-thumb,
.t-toggle.is-init[aria-checked="false"] .t-toggle-thumb {
    animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both;
}

@keyframes t-toggle-on {
    0% { translate: 0 0; }
    55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
    80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
    100% { translate: var(--toggle-travel) 0; }
}

@keyframes t-toggle-off {
    0% { translate: var(--toggle-travel) 0; }
    55% { translate: calc(0px - var(--toggle-ov1)) 0; }
    80% { translate: var(--toggle-ov2) 0; }
    100% { translate: 0 0; }
}

/* Keep native checkbox semantics and keyboard focus while making its pixels
   invisible. It still covers the full track, so the whole switch is clickable. */
.t-toggle > input[type="checkbox"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.t-toggle:has(> input[type="checkbox"]:focus-visible),
.t-toggle:focus-visible {
    outline: 2px solid var(--v2-blue-light, #93acff);
    outline-offset: 3px;
}

.t-toggle:disabled,
.t-toggle:has(> input[type="checkbox"]:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Text-graphic options use a label row with the switch on the right. */
#editor-modal .editor-text-toggle-field {
    justify-content: space-between;
    gap: 0.65rem;
}

/* Posting's legacy .toggle pseudo-thumb must not render underneath the new
   explicit thumb. */
.t-toggle.toggle::after {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .t-toggle-thumb {
        animation: none !important;
        transition: none !important;
    }

    .t-toggle {
        transition-duration: 0.01ms;
    }
}