import { jsxs as l, jsx as i } from "react/jsx-runtime";
import { useTheme as p, Box as e } from "@mui/material";
function x({ size: s = 64, backgroundColor: r = void 0, borderWidth: t = 4 }) {
  const { palette: c } = p(), o = s - t * 2, a = r || c.background.default;
  return /* @__PURE__ */ l(
    e,
    {
      className: "check-icon",
      sx: {
        width: o,
        height: o,
        position: "relative",
        borderRadius: "100%",
        "&, *, *::before, *::after": {
          boxSizing: "content-box !important"
        },
        // 转圈边框的颜色
        border: (n) => `${t}px solid ${n.palette.success.light}`,
        "&::before, &::after": {
          content: '""',
          height: "125%",
          position: "absolute",
          background: a,
          transform: "rotate(-45deg)"
        },
        "&::before": {
          top: `${t / 2 + 1}px`,
          left: `-${t / 2}px`,
          width: `calc(32.5% + ${t}px)`,
          transformOrigin: "100% 50%",
          borderRadius: "100% 0 0 100%"
        },
        "&::after": {
          top: 0,
          left: "37.5%",
          width: `calc(70% + ${t}px)`,
          transformOrigin: "0 50%",
          borderRadius: "0 100% 100% 0",
          animation: "rotate-circle 4.25s ease-in"
        },
        ".icon-line": {
          height: `${t + 1}px`,
          // 对勾的颜色
          backgroundColor: (n) => n.palette.success.light,
          display: "block",
          borderRadius: "100vw",
          position: "absolute",
          zIndex: 10
        },
        "@keyframes rotate-circle": {
          "0%": {
            transform: "rotate(-45deg)"
          },
          "5%": {
            transform: "rotate(-45deg)"
          },
          "12%": {
            transform: "rotate(-405deg)"
          },
          "100%": {
            transform: "rotate(-405deg)"
          }
        }
      },
      children: [
        /* @__PURE__ */ i(
          e,
          {
            component: "span",
            className: "icon-line line-tip",
            sx: {
              top: "57.5%",
              left: "17.5%",
              width: "31.25%",
              transform: "rotate(45deg)",
              animation: "icon-line-tip 0.75s",
              "@keyframes icon-line-tip": {
                "0%": {
                  width: "0",
                  left: "1px",
                  top: "23.75%"
                },
                "54%": {
                  width: "0",
                  left: "1px",
                  top: "23.75%"
                },
                "70%": {
                  width: "62.5%",
                  left: "-10%",
                  top: "46.25%"
                },
                "84%": {
                  width: "21.25%",
                  left: "26.25%",
                  top: "60%"
                },
                "100%": {
                  width: "31.25",
                  left: "17.5%",
                  top: "56.25%"
                }
              }
            }
          }
        ),
        /* @__PURE__ */ i(
          e,
          {
            component: "span",
            className: "icon-line line-long",
            sx: {
              top: "47.5%",
              right: "10%",
              width: "58.75%",
              transform: "rotate(-45deg)",
              animation: "icon-line-long 0.75s",
              "@keyframes icon-line-long": {
                "0%": {
                  width: "0",
                  right: "57.5%",
                  top: "67.5%"
                },
                "65%": {
                  width: "0",
                  right: "57.5%",
                  top: "67.5%"
                },
                "84%": {
                  width: "68.75%",
                  right: "0px",
                  top: "43.75%"
                },
                "100%": {
                  width: "58.75%",
                  right: "10%",
                  top: "47.5%"
                }
              }
            }
          }
        ),
        /* @__PURE__ */ i(
          e,
          {
            className: "icon-circle",
            sx: {
              top: `-${t}px`,
              left: `-${t}px`,
              zIndex: 10,
              width: o,
              height: o,
              borderRadius: "100%",
              position: "absolute",
              boxSizing: "contentBox",
              // 圆环的颜色
              border: `${t}px solid rgba(76, 175, 80, 0.63)`
            }
          }
        ),
        /* @__PURE__ */ i(
          e,
          {
            className: "icon-fix",
            sx: {
              top: `calc(8% - ${Math.sqrt(t)}px)`,
              width: t + 1,
              left: `calc(32% - ${Math.sqrt(t)}px)`,
              zIndex: 1,
              height: o + t * 2,
              position: "absolute",
              transform: "rotate(-45deg)",
              backgroundColor: a
            }
          }
        )
      ]
    }
  );
}
export {
  x as default
};
