import { jsxs as g, jsx as i } from "react/jsx-runtime";
import { Box as n } from "@mui/material";
function x({
  size: s = 64,
  padding: l = void 0,
  borderWidth: f = void 0,
  borderRadius: d = void 0,
  duration: c = void 0,
  children: m
}) {
  const t = s, a = d ?? t / 8, e = f ?? t / 32, r = l ?? t * 0.35 - e, p = c ?? 2.5;
  return /* @__PURE__ */ g(
    n,
    {
      sx: {
        display: "inline-flex",
        justifyContent: "center",
        alignItems: "center",
        width: t,
        height: t,
        position: "relative"
      },
      children: [
        /* @__PURE__ */ i(
          n,
          {
            sx: {
              pointerEvents: "none",
              position: "absolute",
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              width: t,
              height: t,
              overflow: "hidden",
              borderRadius: `${a}px`,
              backgroundColor: "grey.200",
              "&::before,&::after": {
                content: '""',
                position: "absolute",
                pointerEvents: "none"
              },
              "&::after": {
                left: e,
                right: e,
                top: e,
                bottom: e,
                backgroundColor: "background.default",
                borderRadius: `${a - e}px`
              },
              "&::before": {
                width: t * 5,
                height: t * 5,
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                background: ({ palette: o }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${o.secondary.main} 90%, ${o.secondary.main} 100%)`,
                animation: `rotate ${p}s linear infinite`,
                "@keyframes rotate": {
                  "0%": {
                    transform: "translate(-50%, -50%) rotate(0deg)"
                  },
                  "100%": {
                    transform: "translate(-50%, -50%) rotate(360deg)"
                  }
                }
              }
            }
          }
        ),
        /* @__PURE__ */ i(
          n,
          {
            sx: {
              position: "relative",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              width: t - r - e,
              height: t - r - e,
              animation: "wait-bounce 1.6s infinite",
              transformOrigin: "center bottom",
              "@keyframes wait-bounce": {
                "0%": { transform: "scale(1) translateY(0)" },
                "20%": { transform: "scale(1.03) translateY(-4px)" },
                "40%": { transform: "scale(0.98) translateY(2px)" },
                "60%": { transform: "scale(1.01) translateY(-2px)" },
                "80%": { transform: "scale(0.99) translateY(1px)" },
                "100%": { transform: "scale(1) translateY(0)" }
              }
            },
            children: m
          }
        )
      ]
    }
  );
}
export {
  x as default
};
