import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      animation: {
        rotate45Camp: "rotate45Camp 4s ease-in-out infinite",
        rotateZ: "rotateZ 4s linear infinite",
      },
      keyframes: {
        rotate45Camp: {
          "0%": { transform: "rotate(0deg)", borderBottomRightRadius: "0.5rem" },
          "12.5%": { transform: "rotate(45deg)", borderBottomRightRadius: "100%" },
          "25%": { transform: "rotate(90deg)", borderBottomRightRadius: "0.5rem", borderTopRightRadius: "0.5rem" },
          "37.5%": { transform: "rotate(135deg)", borderTopRightRadius: "100%" },
          "50%": { transform: "rotate(180deg)", borderTopRightRadius: "0.5rem", borderTopLeftRadius: "0.5rem" },
          "62.5%": { transform: "rotate(225deg)", borderTopLeftRadius: "100%" },
          "75%": { transform: "rotate(270deg)", borderTopLeftRadius: "0.5rem", borderBottomLeftRadius: "0.5rem" },
          "87.5%": { transform: "rotate(315deg)", borderBottomLeftRadius: "100%" },
          "100%": { transform: "rotate(360deg)", borderBottomLeftRadius: "0.5rem" },
        },
        rotateZ: {
          "0%": { height: "4rem"},
          "50%": { height: "0rem"},
          "100%": { height: "4rem"},
        }
      },
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;