import { cn } from "../util/cn";
import createUseStyles from "../theme/createUseStyles";

export const spinnerAnimation = {
  "@keyframes spinner, @-webkit-keyframes spinner": {
    "0%": {
      "-webkit-transform": "rotate(0deg)",
      transform: "rotate(0deg)",
    },
    "100%": {
      "-webkit-transform": "rotate(360deg)",
      transform: "rotate(360deg)",
    },
  },
};
export const applySpinnerAnimation = {
  "-webkit-animation": "$spinner 1.1s ease-in-out infinite",
  animation: "$spinner 1.1s ease-in-out infinite",
};

const useStyles = createUseStyles({
  ...spinnerAnimation,
  loader: {
    MsTransform: "translateZ(0)",
    WebkitTransform: "translateZ(0)",
    border: "var(--spacing-s) solid var(--color-white)",
    borderLeftColor: "var(--color-darkGrey)",
    margin: "var(--spacing-xl) auto",
    position: "relative",
    textIndent: "-9999em",
    transform: "translateZ(0)",
    ...applySpinnerAnimation,
    "&, &:after": {
      borderRadius: "50%",
      height: 80,
      width: 80,
    },
  },
});

export default function Spinner() {
  const classes = useStyles();
  return <div className={cn("font-size-xxxs", classes.loader)} />;
}
