const n = (e) => {
  const { color: i } = e;
  return {
    ".spinner": {
      display: "inline-block",
      position: "relative",
      width: "5rem",
      height: "5rem",
      "&.size-sm": {
        width: "3rem",
        height: "3rem"
      },
      "&.size-lg": {
        width: "7rem",
        height: "7rem"
      }
    },
    ".spinner div": {
      boxSizing: "border-box",
      display: "block",
      position: "absolute",
      width: "4rem",
      height: "4rem",
      margin: "0.5rem",
      border: `0.5rem solid ${i("primary.60")}`,
      borderRadius: "50%",
      animation: "spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite",
      borderColor: `${i("primary.60")} transparent transparent transparent`
    },
    ".spinner.size-sm div": {
      width: "2rem",
      height: "2rem"
    },
    ".spinner.size-lg div": {
      width: "6rem",
      height: "6rem"
    },
    ".spinner div:nth-child(1)": {
      animationDelay: "-0.45s"
    },
    ".spinner div:nth-child(2)": {
      animationDelay: "-0.3s"
    },
    ".spinner div:nth-child(3)": {
      animationDelay: "-0.15s"
    }
  };
}, r = () => ({
  "@keyframes spinner": {
    "0%": { transform: "rotate(0deg)" },
    "100%": { transform: "rotate(360deg)" }
  }
}), t = {
  getComponents: n,
  getAnimations: r
};
export {
  t as TailwindSpinner
};
