.zv-switch{--hue:223;--trans-dur:.3s;--trans-timing:cubic-bezier(.83, 0, .17, 1);font-size:14px;display:inline-flex}.zv-switch label{-webkit-tap-highlight-color:transparent;cursor:pointer;align-items:center;display:flex}.zv-switch *,.zv-switch :before,.zv-switch :after{box-sizing:border-box;border:0;margin:0;padding:0}.zv-switch .switch,.zv-switch .switch__input{display:block}.zv-switch .switch{perspective:10em;border-radius:1.5em;width:4.5em;height:3em;position:relative;box-shadow:0 .125em .25em #0006}.zv-switch .switch span{display:block}.zv-switch .switch>span{border-radius:inherit;z-index:1}.zv-switch .switch__surface-glare,.zv-switch .switch__inner,.zv-switch .switch__inner-glare,.zv-switch .switch__rocker-sides,.zv-switch .switch__rocker-sides-glare,.zv-switch .switch__rocker,.zv-switch .switch__rocker-glare,.zv-switch .switch__light{transition:transform var(--trans-dur) var(--trans-timing)}.zv-switch .switch__surface{background-color:hsl(var(--hue),10%,83%);width:100%;height:100%;overflow:hidden}.zv-switch .switch>.switch__surface{z-index:0}.zv-switch .switch__surface-glare{background-image:radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0));width:3em;height:3em;transform:translateY(.125em)}.zv-switch .switch__input{background-color:hsl(var(--hue),10%,80%);box-shadow:0 0 0 .125em hsla(var(--hue),90%,50%,0);z-index:1;appearance:none;-webkit-tap-highlight-color:transparent;border-radius:1.5em;outline:#0000;width:calc(100% - .125em);height:calc(100% - .125em);transition:box-shadow .15s linear;position:absolute;top:.0625em;left:.0625em}.zv-switch .switch__input:focus-visible{box-shadow:0 0 0 .125em hsla(var(--hue),90%,50%,1)}.zv-switch .switch__inner{background-color:hsl(var(--hue),10%,83%);position:absolute;inset:.5em;overflow:hidden;transform:translate(.125em)}.zv-switch .switch__inner-glare{background-image:radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0));width:2em;height:2em;position:absolute;transform:translate(100%,-.5em)}.zv-switch .switch__inner-shadow{position:absolute;inset:.5em;box-shadow:0 .125em .25em #0006}.zv-switch .switch__rocker-shadow{position:absolute;inset:.5625em .5625em .5625em .75em;box-shadow:0 .125em .25em #00000026}.zv-switch .switch__rocker-sides{background-color:hsl(var(--hue),10%,80%);transform-style:preserve-3d;position:absolute;inset:.5em;overflow:hidden;transform:rotateY(-20deg)translateZ(.5em)}.zv-switch .switch__rocker-sides-glare{background-image:linear-gradient(90deg,hsla(var(--hue),10%,85%,0),hsla(var(--hue),10%,85%,1),hsla(var(--hue),10%,85%,0));width:200%;height:100%;position:absolute}.zv-switch .switch__rocker{background-color:hsl(var(--hue),10%,80%);transform-style:preserve-3d;position:absolute;inset:.5625em;overflow:hidden;transform:rotateY(-20deg)translateZ(.5em)}.zv-switch .switch__rocker-glare{background-image:linear-gradient(120deg,hsla(var(--hue),10%,85%,0) 25%,hsla(var(--hue),10%,85%,1) 50%,hsla(var(--hue),10%,85%,0) 75%);width:100%;height:100%;position:absolute;transform:translate(-33%)}.zv-switch .switch__light{background-image:linear-gradient(-45deg,hsl(var(--hue),10%,60%) 30%,hsl(var(--hue),10%,80%));box-shadow:0 0 max(1px,.05em) hsla(var(--hue),10%,10%,.3) inset;width:.5em;height:.5em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateY(-20deg)translate(1.125em)translateZ(.51em)}.zv-switch .switch__light-inner{box-shadow:0 0 max(1px,.05em) hsla(var(--hue),10%,10%,.3) inset, 0 0 .25em #0df23e;opacity:0;width:100%;height:100%;transition:opacity var(--trans-dur) var(--trans-timing);background-color:#0df23e;border-radius:50%}.zv-switch--dark .switch__surface{background-color:hsl(var(--hue),10%,22%)}.zv-switch--dark .switch__surface-glare{background-image:radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0))}.zv-switch--dark .switch__input{background-color:hsl(var(--hue),10%,20%)}.zv-switch--dark .switch__inner{background-color:hsl(var(--hue),10%,22%)}.zv-switch--dark .switch__inner-glare{background-image:radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0))}.zv-switch--dark .switch__rocker-shadow{box-shadow:0 .125em .25em #00000080}.zv-switch--dark .switch__rocker-sides{background-color:hsl(var(--hue),10%,20%)}.zv-switch--dark .switch__rocker-sides-glare{background-image:linear-gradient(90deg,hsla(var(--hue),10%,35%,0),hsla(var(--hue),10%,35%,1),hsla(var(--hue),10%,35%,0))}.zv-switch--dark .switch__rocker{background-color:hsl(var(--hue),10%,20%)}.zv-switch--dark .switch__rocker-glare{background-image:linear-gradient(120deg,hsla(var(--hue),10%,25%,0) 25%,hsla(var(--hue),10%,25%,1) 50%,hsla(var(--hue),10%,25%,0) 75%)}.zv-switch--dark .switch__light{background-image:linear-gradient(-45deg,hsl(var(--hue),10%,30%) 30%,hsl(var(--hue),10%,50%))}.zv-switch .switch--vertical{transform:rotate(90deg)}.zv-switch .switch__input:checked~.switch__surface .switch__surface-glare{transform:translate(3em,.125em)}.zv-switch .switch__input:checked~.switch__inner{transform:translate(-.125em)}.zv-switch .switch__input:checked~.switch__inner .switch__inner-glare{transform:translateY(-.5em)}.zv-switch .switch__input:checked~.switch__rocker{transform:rotateY(20deg)translateZ(.5em)}.zv-switch .switch__input:checked~.switch__rocker .switch__rocker-glare{transform:translate(33%)}.zv-switch .switch__input:checked~.switch__rocker-sides{transform:rotateY(20deg)translateZ(.5em)}.zv-switch .switch__input:checked~.switch__rocker-sides .switch__rocker-sides-glare{transform:translate(-50%)}.zv-switch .switch__input:checked~.switch__light{transform:translate(-50%,-50%)rotateY(20deg)translate(1.125em)translateZ(.51em)}.zv-switch .switch__input:checked~.switch__light .switch__light-inner{opacity:1}