| 16 | const $translateX = cssVar("switch-thumb-x") |
| 17 | |
| 18 | const baseStyleTrack: SystemStyleFunction = (props) => { |
| 19 | const { colorScheme: c } = props |
| 20 | |
| 21 | return { |
| 22 | borderRadius: "full", |
| 23 | p: "2px", |
| 24 | width: [$width.reference], |
| 25 | height: [$height.reference], |
| 26 | transitionProperty: "common", |
| 27 | transitionDuration: "fast", |
| 28 | bg: mode("gray.300", "whiteAlpha.400")(props), |
| 29 | _focusVisible: { |
| 30 | boxShadow: "outline", |
| 31 | }, |
| 32 | _disabled: { |
| 33 | opacity: 0.4, |
| 34 | cursor: "not-allowed", |
| 35 | }, |
| 36 | _checked: { |
| 37 | bg: mode(`${c}.500`, `${c}.200`)(props), |
| 38 | }, |
| 39 | } |
| 40 | } |
| 41 | |
| 42 | const baseStyleThumb: SystemStyleObject = { |
| 43 | bg: "white", |