import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { keyframes } from "@emotion/react";
import { BaseIcon } from "./BaseIcon.js";
const ANIMATION = keyframes`
0% { transform: scale(0.5); }
100% { transform: scale(1.5);  }
`;
const ANIMATION_DURATION = 400;
const Loading = (props) => /* @__PURE__ */ jsxs(
  BaseIcon,
  {
    title: "Loading",
    sx: {
      "& path": {
        transformOrigin: "50% 50%",
        transformBox: "fill-box",
        animation: `${ANIMATION} ${ANIMATION_DURATION}ms linear infinite alternate`,
        "&:nth-of-type(1)": {
          animationDelay: `${ANIMATION_DURATION / 3 * 1}ms`
        },
        "&:nth-of-type(2)": {
          animationDelay: `${ANIMATION_DURATION / 3 * 2}ms`
        },
        "&:nth-of-type(3)": {
          animationDelay: `${ANIMATION_DURATION / 3 * 3}ms`
        }
      }
    },
    ...props,
    children: [
      /* @__PURE__ */ jsx("path", { d: "M1,8l1.5-1.5,1.5,1.5-1.5,1.5-1.5-1.5Z" }),
      /* @__PURE__ */ jsx("path", { d: "M6.500001,8l1.5-1.5,1.5,1.5-1.5,1.5-1.5-1.5Z" }),
      /* @__PURE__ */ jsx("path", { d: "M12,8l1.5-1.5,1.5,1.5-1.5,1.5-1.5-1.5Z" })
    ]
  }
);
export {
  Loading
};
