.sun-moon{--toggle-size:30px;--border-width:calc(var(--toggle-size)*.08);--ring-width:calc(var(--toggle-size)*.06);--text-indent:calc(var(--toggle-size)*1.2);--font-size:calc(var(--toggle-size)*.24);z-index:10;width:var(--toggle-size);height:var(--toggle-size);box-sizing:border-box;cursor:pointer;background:#f5f8f8;border-radius:50%;transition:background-color .5s;position:relative;overflow:hidden}.sun-moon:before{content:"";z-index:1;background:#a5abb0;width:100%;height:100%;transition:border-radius .5s,background-color .5s,width .5s,transform .5s;position:absolute;left:50%}.sun-moon:after{content:"Light mode";white-space:nowrap;text-indent:var(--text-indent);line-height:calc(var(--toggle-size) - var(--border-width)*2);z-index:2;border:var(--border-width)solid #f5f8f8;width:100%;height:100%;box-shadow:0 0 0 0 transparent,0 0 0 var(--ring-width)#a5abb0;box-sizing:border-box;font-size:var(--font-size);letter-spacing:1px;text-transform:uppercase;color:#a5abb0;border-radius:50%;transition:border-color .5s,box-shadow .5s;position:absolute}.sun-moon.night{background-color:#a5abb0}.sun-moon.night:before{background:#3f3f4c;border-radius:50%;width:150%;transform:translate(-5%,-35%)rotate(-25deg)}.sun-moon.night:after{content:"Dark mode";box-shadow:0 0 0 0 transparent,0 0 0 var(--ring-width)#a5abb0;border-color:#3f3f4c}