.premium-toggle{--toggle-size: 2em;--toggle-padding: .25em;--handle-size: 1.5em;--track-height: .9em;--off-light: color-mix(in oklab, var(--muted) 80%, white);--off-dark: var(--muted-foreground);--off-shadow: color-mix(in oklab, var(--muted-foreground) 60%, black);--on-primary: var(--primary);--on-secondary: var(--accent);--on-highlight: color-mix(in oklab, var(--primary) 70%, white);--on-shadow: color-mix(in oklab, var(--primary) 60%, black);--on-glow: color-mix(in oklab, var(--primary) 50%, transparent);--on-secondary-glow: color-mix(in oklab, var(--accent) 30%, transparent);--focus-ring: color-mix(in oklab, var(--ring, var(--primary)) 40%, transparent);--sun-color: #f59e0b;position:relative;display:inline-block;width:calc(var(--toggle-size) * 2);height:var(--toggle-size);-webkit-user-select:none;user-select:none;font-size:18px}.premium-toggle input{opacity:0;width:0;height:0;position:absolute}.premium-toggle .switch{position:absolute;inset:0;cursor:pointer}.premium-toggle .track{position:absolute;top:50%;left:0;right:0;height:var(--track-height);transform:translateY(-50%);border-radius:var(--track-height);background:linear-gradient(to bottom,var(--off-light),var(--off-dark));box-shadow:0 .05em .1em #0000001a inset,0 -.05em .1em #ffffff1a inset,0 .1em .2em #0003;transition:all .4s cubic-bezier(.3,1.5,.7,1);overflow:hidden}.premium-toggle .track-shadow{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#0000001a,#0000,#0000001a);opacity:.5;transition:opacity .4s ease}.premium-toggle input:checked~.switch .track{background:linear-gradient(to right,var(--on-primary),var(--on-secondary));box-shadow:0 .05em .1em #0003 inset,0 -.05em .1em #ffffff1a inset,0 .1em .5em var(--on-glow)}.premium-toggle input:checked~.switch .track-shadow{opacity:.7}.premium-toggle .magnetic-field{position:absolute;inset:-50%;border-radius:50%;background:radial-gradient(ellipse at center,#fff0 0% 70%,#fff3);opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .6s ease,transform .6s ease}.premium-toggle input:checked~.switch .magnetic-field{opacity:1;transform:scale(1)}.premium-toggle .handle-container{position:absolute;top:50%;left:var(--toggle-padding);width:var(--handle-size);height:var(--handle-size);transform:translateY(-50%);transition:all .4s cubic-bezier(.3,1.5,.7,1)}.premium-toggle input:checked~.switch .handle-container{left:calc(100% - var(--handle-size) - var(--toggle-padding))}.premium-toggle .handle{position:absolute;inset:0;border-radius:50%;background:linear-gradient(145deg,var(--off-light),var(--off-dark));box-shadow:.15em .15em .3em var(--off-shadow),-.1em -.1em .2em #fffc;transition:all .4s cubic-bezier(.3,1.5,.7,1);overflow:hidden}.premium-toggle input:checked~.switch .handle{background:linear-gradient(145deg,var(--on-highlight),var(--on-primary));box-shadow:.15em .15em .3em var(--on-shadow),-.1em -.1em .2em #fff3,0 0 .5em var(--on-glow)}.premium-toggle .handle-inner{position:absolute;inset:.1em;border-radius:50%;background:linear-gradient(145deg,var(--off-light) 30%,var(--off-dark));transition:all .4s cubic-bezier(.3,1.5,.7,1);overflow:hidden}.premium-toggle input:checked~.switch .handle-inner{background:linear-gradient(145deg,var(--on-highlight) 30%,var(--on-primary))}.premium-toggle .handle-shine{position:absolute;top:.1em;left:.1em;width:40%;height:40%;border-radius:50%;background:linear-gradient(135deg,#fffc,#fff0);opacity:.8;transition:all .4s ease}.premium-toggle input:checked~.switch .handle-shine{opacity:.4;transform:scale(.7) translate(.1em,.1em)}.premium-toggle .handle-texture{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffff1a,#fff0 8%),radial-gradient(circle at 70% 70%,#0000001a,#0000 8%);background-size:.8em .8em;opacity:.3}.premium-toggle .handle-ripple{position:absolute;inset:-20%;border-radius:50%;border:.2em solid rgba(255,255,255,.5);opacity:0;transform:scale(0);pointer-events:none}.premium-toggle input:checked~.switch .handle-ripple{animation:premium-ripple .6s ease-out}@keyframes premium-ripple{0%{opacity:.7;transform:scale(0)}to{opacity:0;transform:scale(1)}}.premium-toggle .sun-moon{position:absolute;inset:0;border-radius:50%;overflow:hidden;transition:all .6s cubic-bezier(.3,1.5,.7,1)}.premium-toggle .ray{position:absolute;background-color:var(--sun-color);width:.15em;height:.5em;left:50%;top:50%;opacity:1;transform-origin:bottom center;transition:all .4s ease .1s}.premium-toggle .ray1{transform:translate(-50%,-120%) rotate(0)}.premium-toggle .ray2{transform:translate(-50%,-120%) rotate(45deg)}.premium-toggle .ray3{transform:translate(-50%,-120%) rotate(90deg)}.premium-toggle .ray4{transform:translate(-50%,-120%) rotate(135deg)}.premium-toggle input:checked~.switch .ray{opacity:0;transform:translate(-50%,-120%) rotate(180deg)}.premium-toggle .crater{position:absolute;background-color:#0003;border-radius:50%;opacity:0;transition:opacity .4s ease}.premium-toggle .crater1{width:.25em;height:.25em;top:30%;left:30%}.premium-toggle .crater2{width:.18em;height:.18em;top:60%;left:60%}.premium-toggle .crater3{width:.2em;height:.2em;top:40%;left:70%}.premium-toggle input:checked~.switch .crater{opacity:1;transition:opacity .4s ease .2s}.premium-toggle .wave-group{position:absolute;inset:0;border-radius:50%;transform:scale(0);overflow:hidden;transition:transform .4s ease}.premium-toggle input:checked~.switch .wave-group{transform:scale(1)}.premium-toggle .wave{position:absolute;left:-50%;right:-50%;height:200%;background:linear-gradient(90deg,transparent 0%,var(--on-secondary-glow) 50%,var(--on-glow) 50%,transparent 100%);opacity:0;transform:translateY(100%)}.premium-toggle input:checked~.switch .wave{animation:premium-wave 1.5s linear infinite;opacity:.3}.premium-toggle .wave2{animation-delay:.5s!important}.premium-toggle .wave3{animation-delay:1s!important}@keyframes premium-wave{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.premium-toggle:active .handle{transform:scale(.9)}.premium-toggle input:focus-visible~.switch .track{box-shadow:0 .05em .1em #0000001a inset,0 -.05em .1em #ffffff1a inset,0 .1em .2em #0003,0 0 0 .2em var(--focus-ring)}.premium-toggle input:checked:focus-visible~.switch .track{box-shadow:0 .05em .1em #0003 inset,0 -.05em .1em #ffffff1a inset,0 .1em .5em var(--on-glow),0 0 0 .2em var(--focus-ring)}
