/* ==========================================================================
   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);
}

.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(--v2-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: 999px;
    background: 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: linear-gradient(135deg, var(--v2-blue, #1014ef), var(--v2-blue-hover, #2429ff));
    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: #eef2f7;
    box-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, #4c4cff);
    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;
    }
}