.toggle-container{position:relative;height:42px;background-color:var(--White);box-shadow:0 4px 6px -1px rgba(40,94,97,.1),0 2px 4px -1px rgba(40,94,97,.06);border-radius:var(--r-full);cursor:pointer;max-width:8rem;min-width:5.2rem;display:flex;align-items:center;padding-inline:var(--2)}.toggle-container .moon{left:var(--1)}.toggle-container .moon,.toggle-container .sun{position:absolute;top:var(--2);padding-inline:var(--1)}.toggle-container .sun{right:var(--1)}.toggle-container .toggle{width:34px;height:34px;background:var(--Teal_600);border-radius:var(--r-full);display:flex;justify-content:center;align-items:center}.toggle-container .tog{transform:translateX(-36px);transition:all .3s ease-in-out}.toggle-container .un-tog{transform:translateX(4px);transition:all .3s ease-in-out}