const SwitchRoot = styled("Switch.Root")` all: unset; display: block; width: 42px; height: 25px; background-color: var(--blackA9); border-radius: 9999px; position: relative; box-shadow: 0 2px 10px var(--blackA7); &[data-state="checked"] { background-color: black; } `; const SwitchThumb = styled("Switch.Thumb")` all: unset; display: block; width: 21px; height: 21px; background-color: white; border-radius: 9999px; box-shadow: 0 2px 2px var(--blackA7); transition: transform 100ms; transform: translateX(2px); will-change: transform; &[data-state="checked"] { transform: translateX(19px); } `; return ( <SwitchRoot> <SwitchThumb /> </SwitchRoot> );