/* ============================================================================ Liquid obround switch. Geometry comes straight from the reference photographs: container 52 × 23 W:H 2.26 — wider per height than the capsule capsule 25 × 19 2px of container showing above and below held 37 × 25 37 = 1.61 × container height; overflows the track The capsule is 100% opaque #FFFFFF at rest. Press or hold and it swells to the held size and turns into high-bend liquid glass, refracting the track underneath. Its centre crossing the container's midpoint is what flips the state — dragging past 50% to the right activates, back past 50% deactivates. ========================================================================== */ html :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle) { /* One knob scales the whole switch; proportions never change. */ --sw-scale: 1; --sw-w: calc(52px * var(--sw-scale)); --sw-h: calc(23px * var(--sw-scale)); --cap-w: calc(25px * var(--sw-scale)); --cap-h: calc(19px * var(--sw-scale)); --cap-w-hold: calc(37px * var(--sw-scale)); --cap-h-hold: calc(25px * var(--sw-scale)); --sw-travel: calc(var(--sw-w) - 4px * var(--sw-scale) - var(--cap-w)); /* 0 → off, 1 → on. Driven live by the drag gesture. */ --p: 0; /* 1 while the capsule is near the middle of its travel. */ --buckle: 0; --sw-track: #e9e9ea; position: relative !important; display: inline-block !important; flex: none !important; box-sizing: border-box !important; width: var(--sw-w) !important; min-width: var(--sw-w) !important; height: var(--sw-h) !important; min-height: var(--sw-h) !important; padding: 0 !important; margin: 0; border: 0 !important; border-radius: 999px !important; background: var(--sw-track) !important; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(0, 0, 0, 0.06) !important; overflow: visible !important; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; vertical-align: middle; transition: background-color 0.20s ease !important; } html :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle):is(.on, .active, [aria-pressed="true"], [aria-checked="true"]) { --p: 1; --sw-track: #00ca48; } /* Legacy pseudo-element knobs from earlier passes must not double up. */ html :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle)::before, html :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle)::after { content: none !important; display: none !important; } /* ------------------------------- capsule -------------------------------- */ .gg-sw-cap { position: absolute; top: 50%; left: 50%; width: var(--cap-w); height: var(--cap-h); border-radius: 999px; background: #ffffff; pointer-events: none; z-index: 2; /* Centre-anchored so swelling to the held size grows both ways. */ transform: translate(calc(-50% + (var(--p) - 0.5) * var(--sw-travel)), -50%) scaleX(calc(1 - 0.085 * var(--buckle))) scaleY(calc(1 + 0.06 * var(--buckle))); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.035); transition: transform 0.34s cubic-bezier(0.22, 1.15, 0.30, 1.10), width 0.20s cubic-bezier(0.22, 1.10, 0.30, 1.06), height 0.20s cubic-bezier(0.22, 1.10, 0.30, 1.06), background 0.16s ease, box-shadow 0.16s ease, border-radius 0.18s ease; } /* Held: swollen, glassy, and refracting the track through a thick rim. */ :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle).is-held .gg-sw-cap { width: var(--cap-w-hold); height: var(--cap-h-hold); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.13) 34%, rgba(255, 255, 255, 0.08) 62%, rgba(255, 255, 255, 0.40) 100% ); backdrop-filter: blur(0.5px) saturate(2.15) brightness(1.07); -webkit-backdrop-filter: blur(0.5px) saturate(2.15) brightness(1.07); /* A high bend index reads as a thick, bright, compressed rim. */ box-shadow: inset 0 1.6px 0.6px rgba(255, 255, 255, 0.98), inset 0 -1.6px 1.2px rgba(255, 255, 255, 0.72), inset 2.4px 0 3px -1px rgba(255, 255, 255, 0.66), inset -2.4px 0 3px -1px rgba(255, 255, 255, 0.66), 0 0 0 1.1px rgba(255, 255, 255, 0.94), 0 3px 9px rgba(0, 62, 26, 0.24), 0 0 14px rgba(255, 255, 255, 0.30); transition: transform 0.06s linear, width 0.17s cubic-bezier(0.22, 1.20, 0.28, 1.12), height 0.17s cubic-bezier(0.22, 1.20, 0.28, 1.12), background 0.14s ease, box-shadow 0.14s ease, border-radius 0.14s ease; } /* A press that never becomes a drag still plays the whole sequence, so the transform keeps its bouncy timing rather than tracking the pointer. */ :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle).is-held:not(.is-dragging) .gg-sw-cap { transition: transform 0.34s cubic-bezier(0.22, 1.15, 0.30, 1.10), width 0.17s cubic-bezier(0.22, 1.20, 0.28, 1.12), height 0.17s cubic-bezier(0.22, 1.20, 0.28, 1.12), background 0.14s ease, box-shadow 0.14s ease, border-radius 0.14s ease; } /* Buckling — the capsule tolerates the middle but visibly dislikes it. */ :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle).is-dragging .gg-sw-cap { border-radius: calc(999px - var(--buckle) * 0px); filter: drop-shadow(0 1px 2px rgba(0, 70, 30, calc(0.10 + 0.14 * var(--buckle)))); } :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle).is-buckling .gg-sw-cap { border-radius: 47% 53% 49% 51% / 56% 44% 56% 44%; } /* Track lighting: the on-state glow follows the capsule as it travels. */ :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle).is-held { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.09) !important; } :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle):disabled, :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle)[aria-disabled="true"] { opacity: 0.45; cursor: default; } :is(.gg-toggle, .gg-switch, .gg-ss-toggle, .toggle):focus-visible { outline: 2px solid rgba(10, 132, 255, 0.85); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .gg-sw-cap { transition-duration: 0.01ms !important; } }