/** @type {import('tailwindcss').Config} */

const { cocoPath } = require("./utils.cjs");

module.exports = {
  content: [
    cocoPath("@components/**/*.{erb,rb,js}", true),
    cocoPath("@assets/**/*.{erb,rb}", true),
    cocoPath("@previews/**/*.{erb,rb}", true),
  ],
  safelist: [
    {
      pattern: /tippy-.+/,
    },
  ],
  blocklist: ["container"],
  theme: {
    extend: {
      containers: {
        "slide-fluid": "700px",
      },
      aspectRatio: {
        slide: "16 / 10",
      },
      animation: {
        spin: "spin 1.5s linear infinite",
        "spin-reverse": "spin 1.5s linear infinite reverse",
      },
      customForms: () => ({
        DEFAULT: {
          checkbox: {
            "&:indeterminate": {
              background:
                "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='2' x='4' y='7' rx='1'/%3E%3C/svg%3E\");",
              borderColor: "transparent",
              backgroundColor: "currentColor",
              backgroundSize: "100% 100%",
              backgroundPosition: "center",
              backgroundRepeat: "no-repeat",
            },
          },
        },
      }),
    },
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),

    ({ matchUtilities, theme }) => {
      // Safari 14-compatible aspect ratio
      matchUtilities(
        {
          aspect: (value) => ({
            "@supports (aspect-ratio: 1 / 1)": {
              aspectRatio: value,
            },
            "@supports not (aspect-ratio: 1 / 1)": {
              "&::before": {
                content: '""',
                float: "left",
                paddingTop: `calc(100% / (${value}))`,
              },
              "&::after": {
                clear: "left",
                content: '""',
                display: "block",
              },
            },
          }),
        },
        { values: theme("aspectRatio") }
      );
    },
  ],
};