// import * as React from "react";
import { Switch } from "radix-ui";
import { styled, theme } from "../theme";

export const SwitchThumb = styled(Switch.Thumb, {
  display: "inline-block",
  padding: "calc($sizes$050 - 1px)",
  backgroundColor: "$$switchThumbVariant",
  borderRadius: "$round",
  transition: theme.transitions.allFast,
  "@reducedMotion": {
    transition: "none",
  },
  transform: `translateX(-$sizes$050)`,
  willChange: "transform",
  '&[data-state="checked"]': {
    transform: `translateX($sizes$050)`,
  },
});

export type SwitchThumbProps = Switch.SwitchThumbProps;