import { c } from "react-compiler-runtime";
import React from "react";
import { makeStyles } from "@material-ui/core";
import RangeSlider from "react-range-slider-input";
//#region src/componentSystems/multiThreadTimeline/ui/DynamicRangeSlider.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	rangeSlider: {
		"& .range-slider__thumb": {
			width: theme.spacing(2.25),
			height: (props) => `calc(${props.margin}px + ${props.threads}px )`,
			borderRadius: theme.spacing(.5),
			background: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z' /%3E%3C/svg%3E\") #fff",
			backgroundRepeat: "no-repeat",
			backgroundPosition: "center"
		},
		"& .range-slider__range": {
			background: "transparent",
			border: "4px solid #fff",
			boxSizing: "border-box",
			boxShadow: "0 0 0 9999px rgba(194, 194, 194, 0.75)",
			zIndex: 0
		},
		height: (props) => `calc(${props.margin}px + ${props.threads}px )`,
		background: "whitesmoke",
		overflow: "hidden"
	}
}));
const DynamicRangeSlider = (props) => {
	const $ = c(5);
	let otherProps;
	if ($[0] !== props) {
		const { children, ...t0 } = props;
		otherProps = t0;
		$[0] = props;
		$[1] = otherProps;
	} else otherProps = $[1];
	const classes = useStyles(props);
	let t0;
	if ($[2] !== classes.rangeSlider || $[3] !== otherProps) {
		t0 = /* @__PURE__ */ React.createElement(RangeSlider, {
			className: classes.rangeSlider,
			...otherProps
		});
		$[2] = classes.rangeSlider;
		$[3] = otherProps;
		$[4] = t0;
	} else t0 = $[4];
	return t0;
};
//#endregion
export { DynamicRangeSlider };

//# sourceMappingURL=DynamicRangeSlider.mjs.map