import * as stylex from "@stylexjs/stylex";
import { controlColor } from "./theme.stylex";
import { radius, size } from "./tokens.stylex";

export const sliderConfig = stylex.defineVars({
	width: size.px4,
	height: size.px4,

	trackHeight: size.px1,

	borderStyle: "none",
	borderRadius: radius.circle,

	thumbBackground: controlColor.sliderThumbBackground,

	trackBorderStyle: "none",
	trackBorderRadius: 0,
});

export const state = stylex.defineVars({
	cursor: "pointer",
	thumbBackground: "",
	trackBackground: "",
	progressBackground: "",
});