@property --nt-arc{syntax:"<angle>";inherits:false;initial-value:0deg}.neo-toggle{--nt-w:80px;--nt-h:calc(var(--nt-w) * .525);--nt-gap:calc(var(--nt-w) * .05);--nt-knob:calc(var(--nt-h) - var(--nt-gap) * 2);--nt-travel:calc(var(--nt-w) - var(--nt-knob) - var(--nt-gap) * 2);--nt-on-a:#cbd5e1;--nt-on-b:#94a3b8;--nt-led-off:#ff4d4d;--nt-led-on:#34d399;--nt-led-sweep:#f59e0b;--nt-led-error:#ff4d4d;width:var(--nt-w);height:var(--nt-h);cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none;align-items:center;display:inline-flex;position:relative}.neo-toggle.is-disabled{cursor:not-allowed;opacity:.5}.neo-toggle__input{opacity:0;width:100%;height:100%;cursor:inherit;margin:0;position:absolute;inset:0}.neo-toggle__track{background:linear-gradient(#0f131a 0%,#191e27 100%);border-radius:999px;transition:box-shadow .35s;position:absolute;inset:0;box-shadow:inset 0 2px 2px #000000e6,inset 0 4px 8px #0009,inset 0 -2px 2px #ffffff14,inset 0 -1px 1px #ffffff0f,0 1px 1px #ffffff0a}.neo-toggle__track:before{content:"";border-radius:inherit;background:linear-gradient(120deg, var(--nt-on-a), var(--nt-on-b) 85%);-webkit-mask-composite:xor;opacity:0;pointer-events:none;padding:2px;transition:opacity .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.neo-toggle__knobwrap{top:var(--nt-gap);left:var(--nt-gap);width:var(--nt-knob);height:var(--nt-knob);will-change:transform;transition:transform .4s cubic-bezier(.34,1.4,.5,1);position:absolute}.neo-toggle__knob{background:linear-gradient(145deg,#2b303a,#20242c);border-radius:50%;transition:box-shadow .35s;position:absolute;inset:0;box-shadow:0 2px 5px #0000008c,0 1px 2px #00000080}.neo-toggle__knob:after{content:"";padding:calc(var(--nt-knob) * .045);-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#ffffffd9 0%,#ffffff1f 35%,#0000 55%);border-radius:50%;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.neo-toggle__spinner{width:calc(var(--nt-knob) * .52);height:calc(var(--nt-knob) * .52);background:conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--nt-on-a) 12%, transparent) 110deg, var(--nt-on-a) 280deg, var(--nt-on-b) 360deg);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - max(2px, var(--nt-knob) * .085)), #000 calc(100% - max(2px, var(--nt-knob) * .085)));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - max(2px, var(--nt-knob) * .085)), #000 calc(100% - max(2px, var(--nt-knob) * .085)));mask:radial-gradient(farthest-side, transparent calc(100% - max(2px, var(--nt-knob) * .085)), #000 calc(100% - max(2px, var(--nt-knob) * .085)));filter:drop-shadow(0 0 3px color-mix(in srgb, var(--nt-on-a) 55%, transparent));pointer-events:none;z-index:2;border-radius:50%;animation:.75s linear infinite nt-spin;position:absolute;top:50%;left:50%}@keyframes nt-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.neo-toggle.is-loading{cursor:progress}.neo-toggle__arc{width:calc(var(--nt-knob) * 1.46);height:calc(var(--nt-knob) * 1.46);background:conic-gradient(from -110deg, var(--nt-on-a) 0deg, var(--nt-on-b) var(--nt-arc), transparent var(--nt-arc));filter:drop-shadow(0 0 5px color-mix(in srgb, var(--nt-on-a) 85%, transparent));pointer-events:none;border-radius:50%;animation:.55s ease-out forwards nt-sweep;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px))}@keyframes nt-sweep{0%{--nt-arc:0deg;opacity:1}65%{--nt-arc:360deg;opacity:1}to{--nt-arc:360deg;opacity:0}}.neo-toggle__led{top:calc(var(--nt-w) * -.035);left:calc(var(--nt-w) * -.035);width:calc(var(--nt-w) * .09);height:calc(var(--nt-w) * .09);background:var(--nt-led-off);box-shadow:0 0 5px var(--nt-led-off), 0 0 1px #0009 inset;pointer-events:none;border-radius:50%;transition:background .3s,box-shadow .3s;position:absolute}.neo-toggle__input:checked~.neo-toggle__knobwrap{transform:translateX(var(--nt-travel))}.neo-toggle__input:checked~.neo-toggle__track{box-shadow:inset 0 2px 2px #000000e6, inset 0 4px 8px #0009, inset 0 -2px 2px #ffffff14, 0 0 10px color-mix(in srgb, var(--nt-on-a) 55%, transparent), 0 0 26px -4px color-mix(in srgb, var(--nt-on-a) 45%, transparent)}.neo-toggle__input:checked~.neo-toggle__track:before{opacity:1;filter:drop-shadow(0 0 5px color-mix(in srgb, var(--nt-on-a) 70%, transparent))}.neo-toggle__input:checked~.neo-toggle__led{background:var(--nt-led-on);box-shadow:0 0 7px var(--nt-led-on), 0 0 14px #34d39999}.neo-toggle.is-sweeping .neo-toggle__led{background:var(--nt-led-sweep);box-shadow:0 0 7px var(--nt-led-sweep), 0 0 14px #f59e0b99}.neo-toggle.is-loading .neo-toggle__led{background:var(--nt-led-sweep);box-shadow:0 0 7px var(--nt-led-sweep), 0 0 14px color-mix(in srgb, var(--nt-led-sweep) 60%, transparent);animation:.85s ease-in-out infinite nt-led-loading}@keyframes nt-led-loading{0%,to{opacity:1}50%{opacity:.3}}.neo-toggle.is-error .neo-toggle__led{background:var(--nt-led-error);box-shadow:0 0 8px var(--nt-led-error), 0 0 16px color-mix(in srgb, var(--nt-led-error) 65%, transparent);animation:1.1s ease-in-out nt-led-error}@keyframes nt-led-error{0%,20%,40%,60%,80%,to{opacity:1}10%,30%,50%,70%,90%{opacity:.18}}.neo-toggle__input:focus-visible~.neo-toggle__track{outline-offset:3px;outline:2px solid #38bdf8b3}@media (prefers-reduced-motion:reduce){.neo-toggle__knobwrap,.neo-toggle__track,.neo-toggle__track:before,.neo-toggle__led{transition:none}.neo-toggle__arc{animation:none;display:none}}
