import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo, useId } from "react";
import { sliderConfig, state } from "./Slider.vars.stylex";
import { controlColor } from "./theme.stylex";
const webkitThumb = "::-webkit-slider-thumb";
const firefoxThumb = "::-moz-range-thumb";
const webkitTack = "::-webkit-slider-runnable-track";
const firefoxTack = "::-moz-range-track";
const firefoxProgress = "::-moz-range-progress";

// Refs:
// - https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/
// - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
// - https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider

const styles = stylex.create({
  base: {
    width: "100%",
    margin: 0,
    padding: 0,
    appearance: "none",
    // Hides the slider so that custom slider can be made
    backgroundColor: "transparent",
    // Otherwise white in Chrome

    accentColor: controlColor.sliderPassedTrackBackground,
    outline: {
      ":focus": "none" // Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though.
    },
    [state.cursor]: {
      default: "pointer",
      ":disabled": "not-allowed"
    },
    [state.thumbBackground]: {
      default: sliderConfig.thumbBackground,
      ":hover:not(:disabled)": controlColor.sliderThumbHoverBackground,
      ":disabled": controlColor.sliderThumbDisabledBackground
    },
    [state.trackBackground]: {
      default: controlColor.sliderTrackBackground,
      ":disabled": controlColor.sliderTrackDisabledBackground
    },
    [state.progressBackground]: {
      default: controlColor.sliderPassedTrackBackground,
      ":disabled": controlColor.sliderDisabledPassedTrackBackground
    },
    [webkitThumb]: {
      appearance: "none",
      cursor: state.cursor,
      width: sliderConfig.width,
      height: sliderConfig.height,
      borderStyle: sliderConfig.borderStyle,
      borderRadius: sliderConfig.borderRadius,
      background: state.thumbBackground,
      // This has to be a specified margin in Chrome, but in Firefox it is automatic
      marginTop: `calc(-1* ${sliderConfig.height} / 3)`
    },
    // Note: DON'T use comma-separated selectors here. It won't work, since a browser will drop the entire rule if it doesn't understand one part of it.
    [firefoxThumb]: {
      cursor: state.cursor,
      width: sliderConfig.width,
      height: sliderConfig.height,
      borderStyle: sliderConfig.borderStyle,
      borderRadius: sliderConfig.borderRadius,
      background: state.thumbBackground
    },
    [webkitTack]: {
      width: "100%",
      height: sliderConfig.trackHeight,
      cursor: state.cursor,
      background: state.trackBackground,
      borderStyle: sliderConfig.trackBorderStyle,
      borderRadius: sliderConfig.trackBorderRadius
    },
    [firefoxTack]: {
      width: "100%",
      height: sliderConfig.trackHeight,
      cursor: state.cursor,
      background: state.trackBackground,
      borderStyle: sliderConfig.trackBorderStyle,
      borderRadius: sliderConfig.trackBorderRadius
    },
    [firefoxProgress]: {
      background: state.progressBackground
    }
  }
});
export default memo(function Slider(t0) {
  const $ = _c(19);
  const {
    name,
    disabled,
    defaultValue,
    value,
    onChange,
    min,
    max,
    step,
    list
  } = t0;
  const markerId = useId();
  let t1;
  if ($[0] !== onChange) {
    t1 = onChange ? e => onChange?.(e.currentTarget.valueAsNumber) : undefined;
    $[0] = onChange;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const onChangeWrapped = t1;
  let t2;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = stylex.props(styles.base);
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  const t3 = list && markerId;
  let t4;
  if ($[3] !== defaultValue || $[4] !== disabled || $[5] !== max || $[6] !== min || $[7] !== name || $[8] !== onChangeWrapped || $[9] !== step || $[10] !== t3 || $[11] !== value) {
    t4 = <input type="range" {...t2} disabled={disabled} name={name} min={min} max={max} step={step} defaultValue={defaultValue} value={value} onChange={onChangeWrapped} list={t3} />;
    $[3] = defaultValue;
    $[4] = disabled;
    $[5] = max;
    $[6] = min;
    $[7] = name;
    $[8] = onChangeWrapped;
    $[9] = step;
    $[10] = t3;
    $[11] = value;
    $[12] = t4;
  } else {
    t4 = $[12];
  }
  let t5;
  if ($[13] !== list || $[14] !== markerId) {
    t5 = list && <datalist id={markerId}>{list.map(_temp)}</datalist>;
    $[13] = list;
    $[14] = markerId;
    $[15] = t5;
  } else {
    t5 = $[15];
  }
  let t6;
  if ($[16] !== t4 || $[17] !== t5) {
    t6 = <>{t4}{t5}</>;
    $[16] = t4;
    $[17] = t5;
    $[18] = t6;
  } else {
    t6 = $[18];
  }
  return t6;
});
function _temp(value_0) {
  return <option key={value_0} value={value_0} />;
}
//# sourceMappingURL=Slider.jsx.map