@guruhotel/aura-ui/esm/switch/switch.styles.js

⚛️ React UI library by GuruHotel

import{styled as t}from"../theme";import*as r from"@radix-ui/react-switch";export const StyledThumb=t(r.Thumb,{display:"block",backgroundColor:"$guru9",'&[data-state="unchecked"]':{backgroundColor:"$text9"},borderRadius:"$full",transition:"transform 100ms",transform:"translateX(4px)",willChange:"transform"});export const StyledSwitch=t(r.Root,{all:"unset",borderRadius:"$full",position:"relative",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",border:"solid",borderWidth:"2px",borderColor:"$guru7",_focusVisible:{boxShadow:"0 0 0 1px $colors$surfaceLight, 0 0 0 3px $colors$guru12"},_hover:{cursor:"pointer"},_disabled:{opacity:.5,cursor:"no-drop"},'&[data-state="checked"]':{backgroundColor:"$guru4"},'&[data-state="unchecked"]':{backgroundColor:"$surfaceLight",border:"solid",borderWidth:"2px",borderColor:"$text7"},variants:{size:{xs:{width:26,height:16,[`& ${StyledThumb}`]:{width:10,height:10,'&[data-state="checked"]':{transform:"translateX(12px)"}}},sm:{width:32,height:20,[`& ${StyledThumb}`]:{width:12,height:12,'&[data-state="checked"]':{transform:"translateX(16px)"}}},md:{width:38,height:24,[`& ${StyledThumb}`]:{width:14,height:14,'&[data-state="checked"]':{transform:"translateX(20px)"}}},lg:{width:46,height:28,[`& ${StyledThumb}`]:{width:16,height:16,'&[data-state="checked"]':{transform:"translateX(26px)"}}},xl:{width:54,height:32,[`& ${StyledThumb}`]:{width:18,height:18,'&[data-state="checked"]':{transform:"translateX(30px)"},transform:"translateX(5px)"}}}},defaultVariants:{size:"xs"}});