import h from "./index-objectWithoutPropertiesLoose.js";
import a from "./index-extends.js";
import "react";
import { clsx as g } from "./index-clsx.m.js";
import { CLOCK_WIDTH as p, CLOCK_HOUR_WIDTH as t } from "./index-shared2.js";
import { getClockNumberUtilityClass as N, clockNumberClasses as s } from "./index-clockNumberClasses.js";
import { jsx as k } from "react/jsx-runtime";
import M from "./index-useThemeProps.js";
import _ from "./index-composeClasses.js";
import $ from "./index-styled.js";
const I = ["className", "disabled", "index", "inner", "label", "selected"], R = (e) => {
  const {
    classes: o,
    selected: r,
    disabled: l
  } = e;
  return _({
    root: ["root", r && "selected", l && "disabled"]
  }, N, o);
}, P = $("span", {
  name: "MuiClockNumber",
  slot: "Root",
  overridesResolver: (e, o) => [o.root, {
    [`&.${s.disabled}`]: o.disabled
  }, {
    [`&.${s.selected}`]: o.selected
  }]
})(({
  theme: e,
  ownerState: o
}) => a({
  height: t,
  width: t,
  position: "absolute",
  left: `calc((100% - ${t}px) / 2)`,
  display: "inline-flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "50%",
  color: e.palette.text.primary,
  fontFamily: e.typography.fontFamily,
  "&:focused": {
    backgroundColor: e.palette.background.paper
  },
  [`&.${s.selected}`]: {
    color: e.palette.primary.contrastText
  },
  [`&.${s.disabled}`]: {
    pointerEvents: "none",
    color: e.palette.text.disabled
  }
}, o.inner && a({}, e.typography.body2, {
  color: e.palette.text.secondary
})));
function F(e) {
  const o = M({
    props: e,
    name: "MuiClockNumber"
  }), {
    className: r,
    disabled: l,
    index: n,
    inner: m,
    label: u,
    selected: b
  } = o, f = h(o, I), i = o, x = R(i), c = n % 12 / 12 * Math.PI * 2 - Math.PI / 2, d = (p - t - 2) / 2 * (m ? 0.65 : 1), y = Math.round(Math.cos(c) * d), C = Math.round(Math.sin(c) * d);
  return /* @__PURE__ */ k(P, a({
    className: g(r, x.root),
    "aria-disabled": l ? !0 : void 0,
    "aria-selected": b ? !0 : void 0,
    role: "option",
    style: {
      transform: `translate(${y}px, ${C + (p - t) / 2}px`
    },
    ownerState: i
  }, f, {
    children: u
  }));
}
export {
  F as ClockNumber
};
