.switch{position:relative;height:2em;width:4em;cursor:pointer}.switch-outer{position:absolute;height:100%;width:100%;border-radius:2em;transition:background-color .3s ease-out}.switch.dark .switch-outer{background-color:#22272e;border:solid 1px #515151}.switch.light .switch-outer{background-color:#3f61d9}.knob{position:absolute;padding-top:20%;height:70%;width:37.5%;border-radius:10em;transition:all .5s ease-out}.knob.dark{background-color:#586282;margin:7% auto auto 8%}.knob.light{background-color:#fff;margin:7% auto auto 56%}.theme-icon{position:absolute!important;--ggs: 0.75;transition:opacity .1s ease-out}.theme-icon.light{left:10%;top:15%;color:#fff}.theme-icon.dark{right:10%;top:20%}.switch.dark .theme-icon.light{opacity:0}.switch.light .theme-icon.dark{opacity:0}