import { styled } from "../stitches.config";
import * as SwitchPrimitive from "@radix-ui/react-switch";

const StyledSwitch = styled(SwitchPrimitive.Root, {
  all: "unset",
  width: 42,
  height: 25,
  backgroundColor: "$mauve9",
  borderRadius: "9999px",
  position: "relative",
  boxShadow: `0 2px 10px $colors$mauve2`,
  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
  "&:focus": { boxShadow: `0 0 0 2px $colors$mauveA2` },
  '&[data-state="checked"]': { backgroundColor: "$green11" },
});

const StyledThumb = styled(SwitchPrimitive.Thumb, {
  display: "block",
  width: 21,
  height: 21,
  backgroundColor: "white",
  borderRadius: "9999px",
  boxShadow: `0 2px 2px $colors$mauveA6`,
  transition: "transform 100ms",
  transform: "translateX(2px)",
  willChange: "transform",
  '&[data-state="checked"]': { transform: "translateX(19px)" },
});

// Exports
export const Switch = StyledSwitch;
export const SwitchThumb = StyledThumb;