.switcher{position:relative;display:flex;align-items:center;gap:4px;width:100px;height:44px;box-sizing:border-box;padding:4px;font-size:16px;background:transparent;border:none;border-radius:99em}.switcher__legend{margin:-1px;border:0;padding:0;clip-path:inset(100%)}.switcher__input,.switcher__legend{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);overflow:hidden}.switcher__input{clip-path:inset(100%)}.switcher__icon{display:block;width:22px;height:22px;transition:transform .2s cubic-bezier(.5,0,0,1)}.switcher__option{--c:var(--foreground);display:flex;justify-content:center;align-items:center;flex:1;height:100%;box-sizing:border-box;border-radius:99em;opacity:.5;transition:all .16s;position:relative;z-index:2;cursor:pointer}.switcher__option:hover{--c:var(--noctavia);opacity:1}.switcher__option:hover .switcher__icon{transform:scale(1.15)}.switcher__option:has(input:checked){--c:var(--foreground);opacity:1;cursor:default}.switcher__option:has(input:checked) .switcher__icon{transform:scale(1)}.switcher:after{content:"";position:absolute;left:4px;top:4px;display:block;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:99em;background-color:color-mix(in srgb,var(--c-glass) 36%,transparent);z-index:1;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 2px 1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -1.5px -1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -2px -6px 1px -5px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -1px 2px 3px -1px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 -4px 1px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 3px 6px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent);transition:background-color .4s cubic-bezier(1,0,.4,1),box-shadow .4s cubic-bezier(1,0,.4,1)}.switcher:has(input[value=light]:checked):after{translate:0 0;transform-origin:right;transition:background-color .4s cubic-bezier(1,0,.4,1),box-shadow .4s cubic-bezier(1,0,.4,1),translate .4s cubic-bezier(1,0,.4,1);animation:scaleToggle .44s ease}.switcher:has(input[value=dark]:checked):after{translate:100% 0;transform-origin:left;transition:background-color .4s cubic-bezier(1,0,.4,1),box-shadow .4s cubic-bezier(1,0,.4,1),translate .4s cubic-bezier(1,0,.4,1);animation:scaleToggle2 .44s ease}.switcher[data-prev=light]:has(input[value=dark]:checked):after{transform-origin:left}.switcher[data-prev=dark]:has(input[value=light]:checked):after{transform-origin:right}@keyframes scaleToggle{0%{scale:1 1}50%{scale:1.1 1}to{scale:1 1}}@keyframes scaleToggle2{0%{scale:1 1}50%{scale:1.1 1}to{scale:1 1}}