import type { Config } from 'tailwindcss';
import animated from 'tailwindcss-animated';
import ariaComponents from 'tailwindcss-react-aria-components';
import defaultTheme from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';

import designSystemColors from './tailwind.colors';

// NOTE: if changing tailwind breakpoints, also update the constants in src/utils/constants.ts
export default {
  darkMode: 'selector',
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      maxHeight: {
        inherit: 'inherit',
      },
      screens: {
        '2xs': '320px',
        xs: '480px',
        // WARNING: Non-"simple" breakpoints will disable some Tailwind features that we rely on!
        // For min/max-height @media queries, you need to use arbitrary variables:
        // e.g. [@media(min-height:144px)]:hidden
      },
      containers: {
        '4xs': '12rem',
        '3xs': '14rem',
        '2xs': '16rem',
        content: '180rem',
      },
      fontFamily: {
        sans: ['Neue Montreal', ...defaultTheme.fontFamily.sans],
        serif: ['Editorial New', ...defaultTheme.fontFamily.serif],
        mono: ['Input Sans', ...defaultTheme.fontFamily.mono],
      },
      colors: {
        ...designSystemColors,
        /**
         * @TODO: We want to deprecate the usage of custom defined colors below
         * in favor of using semantic colors from design system across the app.
         *
         * https://www.figma.com/design/BpZG5KdZdiZnKGPo6esrM0/Suno-Design-System
         */
        primary: designSystemColors.gray['950'],
        secondary: designSystemColors.gray['700'],
        tertiary: designSystemColors.gray['100'],
        quaternary: designSystemColors.gray['200'],
      },
      boxShadow: {
        'swatch-outline': 'inset 0 0 2px rgb(var(--rgb-black) / 0.6)',
        'glass-highlight': 'inset 0px 0px 2px 1px rgba(255, 255, 255, 0.08)',
      },
      dropShadow: {
        'black-1': '0 0 0.25rem rgb(var(--rgb-black) / 0.25)',
        'black-1.5': '0 0 0.375rem rgb(var(--rgb-black) / 0.25)',
        'black-2': '0 0 0.5rem rgb(var(--rgb-black) / 0.25)',
        'black-overlay-1': '0 0 0.125rem var(--color-black)',
        'black-overlay-2': '0 0 0.25rem var(--color-black)',
        logo: '0 0 8px var(--color-black)',
        'avatar-overlay': '0 0 2px rgb(var(--rgb-black) / 0.5)',
        'v4-promo-glow': '0 0 4px #c3e734',
        'promo-carousel-nav': '0 0 3px var(--color-background-secondary)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
        'accordion-up': 'accordion-up 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
      },
    },
  },
  plugins: [
    animated,
    ariaComponents,
    plugin(function ({ matchVariant, matchUtilities, theme }) {
      matchVariant('not-data', (value) => `&:not([data-${value}])`);
      matchVariant('ancestor-data', (value) => `[data-${value}] &`);
      matchVariant('parent-data', (value) => `[data-${value}] > &`);
      matchVariant('not-ancestor-data', (value) => `:not([data-${value}]) &`);
      matchVariant('not-parent-data', (value) => `:not([data-${value}]) > &`);
      matchUtilities(
        {
          /**
           * Mask border utility. The background will act as the border color/gradient/image
           */
          'mask-border': (value) => ({
            '-webkit-mask': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
            '-webkit-mask-composite': 'xor',
            mask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
            'mask-composite': 'exclude',
            padding: value,
          }),
        },
        {
          values: theme('borderWidth'), // Uses Tailwind's spacing scale
        }
      );
    }),
  ],
} satisfies Config;