import type { Config } from "tailwindcss"
import plugin from "tailwindcss/plugin"

export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{ts,tsx,mdx}", "../src/components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      zIndex: {
        1: "1",
      },
    },
  },
  plugins: [
    plugin(({ addVariant }) => {
      addVariant("any-pointer-coarse", "@media (any-pointer: coarse)")
      addVariant("not-data-disabled", "&:not([data-disabled])")
      addVariant("not-data-pressed", "&:not([data-pressed])")

      for (const attribute of [
        "active",
        "behind",
        "checked",
        "closed",
        "disabled",
        "empty",
        "ending-style",
        "expanded",
        "highlighted",
        "hovering",
        "instant",
        "limited",
        "nested-dialog-open",
        "nested-drawer-open",
        "nested-drawer-swiping",
        "placeholder",
        "popup-open",
        "pressed",
        "scrolling",
        "selected",
        "starting-style",
        "swiping",
        "unchecked",
      ]) {
        addVariant(`data-${attribute}`, `&[data-${attribute}]`)
      }
    }),
  ],
} satisfies Config