// import starlightPlugin from "@astrojs/starlight-tailwind"
import aspectRatioPlugin from "@tailwindcss/aspect-ratio"
import containerQueriesPlugin from "@tailwindcss/container-queries"
import typographyPlugin from "@tailwindcss/typography"
import type { Config } from "tailwindcss"
import tailwindcssAnimate from "tailwindcss-animate"
import defaultTheme from "tailwindcss/defaultTheme"
import plugin from "tailwindcss/plugin"

export default (<Config> {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  darkMode: "class",
  important: true,
  future: { hoverOnlyWhenSupported: true },
  safelist: ["dark"],
  // theme: {
  //   container: {
  //     center: true,
  //     padding: "2rem",
  //     screens: {
  //       "xs": "320px",
  //       "2xl": "1400px",
  //     },
  //   },
  //   extend: {
  //     fontSize: {
  //       // this exists as `*-base` but `*-md` is more intuitive
  //       md: [
  //         "1rem",
  //         {
  //           lineHeight: "1.5rem",
  //         },
  //       ],
  //     },
  //     colors: {
  //       border: "hsl(var(--border) / <alpha-value>)",
  //       input: "hsl(var(--input) / <alpha-value>)",
  //       ring: "hsl(var(--ring) / <alpha-value>)",
  //       background: "hsl(var(--background) / <alpha-value>)",
  //       foreground: "hsl(var(--foreground) / <alpha-value>)",
  //       primary: {
  //         DEFAULT: "hsl(var(--primary) / <alpha-value>)",
  //         foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
  //       },
  //       secondary: {
  //         DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
  //         foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
  //       },
  //       destructive: {
  //         DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
  //         foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
  //       },
  //       muted: {
  //         DEFAULT: "hsl(var(--muted) / <alpha-value>)",
  //         foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
  //       },
  //       accent: {
  //         DEFAULT: "hsl(var(--accent) / <alpha-value>)",
  //         foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
  //         // DEFAULT: "#A0ECFD",
  //         50: "#FAFEFF",
  //         100: "#F0FCFF",
  //         200: "#DCF8FE",
  //         300: "#C8F4FE",
  //         400: "#B4F0FD",
  //         500: "#A0ECFD",
  //         600: "#5FDFFC",
  //         700: "#1ED2FA",
  //         800: "#04ACD2",
  //         900: "#037791",
  //         950: "#025C70",
  //       },
  //       popover: {
  //         DEFAULT: "hsl(var(--popover) / <alpha-value>)",
  //         foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
  //       },
  //       card: {
  //         DEFAULT: "hsl(var(--card) / <alpha-value>)",
  //         foreground: "hsl(var(--card-foreground) / <alpha-value>)",
  //       },
  //       sidebar: {
  //         "DEFAULT": "hsl(var(--sidebar-background))",
  //         "foreground": "hsl(var(--sidebar-foreground))",
  //         "primary": "hsl(var(--sidebar-primary))",
  //         "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
  //         "accent": "hsl(var(--sidebar-accent))",
  //         "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
  //         "border": "hsl(var(--sidebar-border))",
  //         "ring": "hsl(var(--sidebar-ring))",
  //       },
  //     },
  //     borderRadius: {
  //       xl: "calc(var(--radius) + 4px)",
  //       lg: "var(--radius)",
  //       md: "calc(var(--radius) - 2px)",
  //       sm: "calc(var(--radius) - 4px)",
  //     },
  //     fontFamily: {
  //       sans: ["Inter var", ...defaultTheme.fontFamily.sans],
  //       display: [
  //         "Inter var",
  //         {
  //           fontFeatureSettings: "\"ss01\", \"cv09\", \"ss08\" \"zero\"",
  //           fontVariationSettings: "\"opsz\" 32",
  //         },
  //       ],
  //       mono: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
  //       jetbrains: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
  //     },
  //     keyframes: {
  //       "accordion-down": {
  //         from: { height: "0" },
  //         to: { height: "var(--bits-accordion-content-height)" },
  //       },
  //       "accordion-up": {
  //         from: { height: "var(--bits-accordion-content-height)" },
  //         to: { height: "0" },
  //       },
  //       "caret-blink": {
  //         "0%,70%,100%": { opacity: "1" },
  //         "20%,50%": { opacity: "0" },
  //       },
  //     },
  //     animation: {
  //       "accordion-down": "accordion-down 0.2s ease-out",
  //       "accordion-up": "accordion-up 0.2s ease-out",
  //       "caret-blink": "caret-blink 1.25s ease-out infinite",
  //     },
  //   },
  // },
  plugins: [
    // starlightPlugin(),
    tailwindcssAnimate,
    typographyPlugin,
    aspectRatioPlugin,
    containerQueriesPlugin,
    plugin(({ addVariant, addUtilities, matchUtilities, theme }) => {
      matchUtilities(
        { "animation-delay": value => ({ "animation-delay": value }) },
        { values: theme("transitionDelay") },
      )
      addVariant("optional", "&:optional")
      addVariant("hocus", ["&:hover", "&:focus"])
      addVariant("inverted-colors", "@media (inverted-colors: inverted)")
      addUtilities({
        ".content-auto": { "content-visibility": "auto" },
        ".content-hidden": { "content-visibility": "hidden" },
        ".content-visible": { "content-visibility": "visible" },
      })
    }),
  ],
})