.switcher{background-color:var(--switcher-background-color);border:2px solid var(--switcher-background-color);border-radius:40px;flex-direction:row;align-items:center;width:fit-content;display:flex;position:relative}.switcher__button{transition:scale .16s var(--ease-out),color .2s ease;z-index:1;color:#fff;text-align:center;cursor:pointer;background-color:#0000;border:none;border-radius:40px;justify-content:center;align-items:center;padding:.4rem;font-family:Raleway,sans-serif;font-size:1rem;display:flex}.switcher__button svg{width:1rem;height:1rem}@media (hover:hover) and (pointer:fine){.switcher__button:hover{scale:1.1}}.switcher__button:active{scale:.95}.switcher__selected,.switcher__selected__second,.switcher__selected__first{background-color:var(--switcher-selected-color);width:50%;height:100%;transition:transform .3s var(--ease-in-out);border-radius:40px;position:absolute;transform:translateY(0%)}.switcher__selected__first{transform:translate(0%)}.switcher__selected__second{transform:translate(100%)}.btnContainer{grid-gap:.2rem;grid-template-columns:repeat(2,1fr);display:grid}
.theme-toggle__sun{color:#000}.theme-toggle .switcher__selected{transform:translateX(var(--switcher-knob-x))}