.theme-switch{--toggle-size:20px;--container-width:4em;--container-height:2em;--container-radius:4em;--container-light-bg:#3D7EAE;--container-night-bg:#1D1F2C;--circle-container-diameter:2.4em;--sun-moon-diameter:1.6em;--sun-bg:#ECCA2F;--moon-bg:#C4C9D1;--spot-color:#959DB1;--circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);--stars-color:#fff;--clouds-color:#F3FDFF;--back-clouds-color:#AACADF;--transition:.3s cubic-bezier(0.4,0,0.2,1);--circle-transition:.2s cubic-bezier(0.4,0,0.2,1)}.theme-switch,.theme-switch *,.theme-switch :after,.theme-switch :before{box-sizing:border-box;margin:0;padding:0;font-size:var(--toggle-size)}.theme-switch__container{width:var(--container-width);height:var(--container-height);background-color:var(--container-light-bg);border-radius:var(--container-radius);overflow:hidden;cursor:pointer;box-shadow:0 -.062em .062em rgba(0,0,0,.25),0 .062em .125em rgba(255,255,255,.94);transition:var(--transition);position:relative;display:flex;align-items:center;will-change:background-color}.theme-switch__container:before{content:"";position:absolute;z-index:1;inset:0;box-shadow:inset 0 .05em .187em rgba(0,0,0,.25),inset 0 .05em .187em rgba(0,0,0,.25);border-radius:var(--container-radius)}.theme-switch__checkbox{display:none}.theme-switch__circle-container{width:var(--circle-container-diameter);height:var(--circle-container-diameter);background-color:rgba(255,255,255,.1);position:absolute;left:calc(var(--circle-container-offset) + .1em);top:calc(var(--circle-container-offset) + .05em);border-radius:var(--container-radius);box-shadow:inset 0 0 0 2.4em rgba(255,255,255,.1),0 0 0 .5em rgba(255,255,255,.1),0 0 0 1em rgba(255,255,255,.1);display:flex;transition:var(--circle-transition);pointer-events:none;will-change:left}.theme-switch__sun-moon-container{pointer-events:auto;position:relative;z-index:2;width:var(--sun-moon-diameter);height:var(--sun-moon-diameter);margin:auto;border-radius:var(--container-radius);background-color:var(--sun-bg);box-shadow:inset .062em .062em .062em 0 rgba(254,255,239,.61),inset 0 -.062em .062em 0 #a1872a;filter:drop-shadow(.062em .125em .125em rgba(0,0,0,.25)) drop-shadow(0 .062em .125em rgba(0,0,0,.25));overflow:hidden;transition:var(--transition)}.theme-switch__moon{transform:translateX(100%);width:100%;height:100%;background-color:var(--moon-bg);border-radius:inherit;box-shadow:inset .062em .062em .062em 0 rgba(254,255,239,.61),inset 0 -.062em .062em 0 #969696;transition:var(--transition);position:relative;will-change:transform}.theme-switch__spot{position:absolute;top:.6em;left:.25em;width:.6em;height:.6em;border-radius:var(--container-radius);background-color:var(--spot-color);box-shadow:inset 0 .0312em .062em rgba(0,0,0,.25)}.theme-switch__spot:nth-of-type(2){width:.3em;height:.3em;top:.75em;left:1.1em}.theme-switch__spot:nth-last-of-type(3){width:.2em;height:.2em;top:.25em;left:.65em}.theme-switch__clouds{width:1em;height:1em;background-color:var(--clouds-color);border-radius:var(--container-radius);bottom:-.5em;box-shadow:.75em .25em var(--clouds-color),-.25em -.25em var(--back-clouds-color),1.15em .3em var(--clouds-color),.4em -.1em var(--back-clouds-color),1.75em 0 var(--clouds-color),1em -.05em var(--back-clouds-color),2.35em .25em var(--clouds-color),1.6em -.25em var(--back-clouds-color),2.9em -.05em var(--clouds-color),2.1em 0 var(--back-clouds-color),3.6em -.25em var(--clouds-color),2.7em -.35em var(--back-clouds-color);will-change:bottom}.theme-switch__clouds,.theme-switch__stars-container{position:absolute;left:.25em;transition:var(--transition)}.theme-switch__stars-container{color:var(--stars-color);top:-100%;width:2.2em;height:auto;will-change:top,transform}.theme-switch__checkbox:checked+.theme-switch__container{background-color:var(--container-night-bg)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter))}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container:hover{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - .15em)}.theme-switch__circle-container:hover{left:calc(var(--circle-container-offset) + .15em)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__moon{transform:translate(0)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__clouds{bottom:-3.2em}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__stars-container{top:50%;transform:translateY(-50%)}