import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './**/*.ts*',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  plugins: [
    require('@tailwindcss/typography'),
    require('@nextui-org/react').nextui(),
  ],
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      },
      fontSize: { '2xs': ['0.75rem', { lineHeight: '1.25rem' }] },
      typography: (theme: any) => ({
        invert: {
          css: {
            '--tw-prose-body': 'var(--tw-prose-invert-body)',
            '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
            '--tw-prose-links': 'var(--tw-prose-invert-links)',
            '--tw-prose-links-hover': 'var(--tw-prose-invert-links-hover)',
            '--tw-prose-underline': 'var(--tw-prose-invert-underline)',
            '--tw-prose-underline-hover':
              'var(--tw-prose-invert-underline-hover)',
            '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
            '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
            '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
            '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
            '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
            '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
            '--tw-prose-code': 'var(--tw-prose-invert-code)',
            '--tw-prose-code-bg': 'var(--tw-prose-invert-code-bg)',
            '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
            '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
            '--tw-prose-pre-title-bg': 'var(--tw-prose-invert-pre-title-bg)',
            '--tw-prose-pre-border': 'var(--tw-prose-invert-pre-border)',
            '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
            '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
          },
        },
        DEFAULT: {
          css: {
            '--tw-prose-body': theme('colors.zinc.600'),
            '--tw-prose-headings': theme('colors.zinc.900'),
            '--tw-prose-links': theme('colors.teal.500'),
            '--tw-prose-links-hover': theme('colors.teal.600'),
            '--tw-prose-underline': theme('colors.teal.500 / 0.2'),
            '--tw-prose-underline-hover': theme('colors.teal.500'),
            '--tw-prose-bold': theme('colors.zinc.900'),
            '--tw-prose-counters': theme('colors.zinc.900'),
            '--tw-prose-bullets': theme('colors.zinc.900'),
            '--tw-prose-hr': theme('colors.zinc.10 0'),
            '--tw-prose-quote-borders': theme('colors.zinc.200'),
            '--tw-prose-captions': theme('colors.zinc.400'),
            '--tw-prose-code': theme('colors.zinc.600'),
            '--tw-prose-code-bg': theme('colors.zinc.100'),
            '--tw-prose-pre-code': theme('colors.zinc.200'),
            '--tw-prose-pre-bg': theme('colors.zinc.800'),
            '--tw-prose-pre-title-bg': theme('colors.zinc.900/0.9'),
            '--tw-prose-pre-border': theme('colors.zinc.600'),
            '--tw-prose-th-borders': theme('colors.zinc.200'),
            '--tw-prose-td-borders': theme('colors.zinc.100'),
            '--tw-prose-invert-body': theme('colors.zinc.400'),
            '--tw-prose-invert-headings': theme('colors.zinc.200'),
            '--tw-prose-invert-links': theme('colors.teal.400'),
            '--tw-prose-invert-links-hover': theme('colors.teal.400'),
            '--tw-prose-invert-underline': theme('colors.teal.400 / 0.3'),
            '--tw-prose-invert-underline-hover': theme('colors.teal.400'),
            '--tw-prose-invert-bold': theme('colors.zinc.200'),
            '--tw-prose-invert-counters': theme('colors.zinc.200'),
            '--tw-prose-invert-bullets': theme('colors.zinc.200'),
            '--tw-prose-invert-hr': theme('colors.zinc.700 / 0.4'),
            '--tw-prose-invert-quote-borders': theme('colors.zinc.500'),
            '--tw-prose-invert-captions': theme('colors.zinc.500'),
            '--tw-prose-invert-code': theme('colors.zinc.300'),
            '--tw-prose-invert-code-bg': theme('colors.zinc.200 / 0.05'),
            '--tw-prose-invert-pre-code': theme('colors.zinc.100'),
            '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 0.4)',
            '--tw-prose-invert-pre-title-bg': 'rgb(0 0 0 / 0.4)',
            '--tw-prose-invert-pre-border': theme('colors.zinc.200 / 0.1'),
            '--tw-prose-invert-th-borders': theme('colors.zinc.700'),
            '--tw-prose-invert-td-borders': theme('colors.zinc.800'),
            // Base
            color: 'var(--tw-prose-body)',
            lineHeight: theme('lineHeight.7'),
            '> *': {
              marginTop: theme('spacing.10'),
              marginBottom: theme('spacing.10'),
            },
            p: {
              marginTop: theme('spacing.7'),
              marginBottom: theme('spacing.7'),
              wordBreak: 'break-word',
            },
            // Headings
            'h2, h3': {
              color: 'var(--tw-prose-headings)',
              fontWeight: theme('fontWeight.semibold'),
            },
            h2: {
              fontSize: theme('fontSize.2xl')[0],
              lineHeight: theme('lineHeight.7'),
              marginTop: theme('spacing.20'),
              marginBottom: theme('spacing.4'),
            },
            h3: {
              fontSize: theme('fontSize.xl')[0],
              lineHeight: theme('lineHeight.7'),
              marginTop: theme('spacing.16'),
              marginBottom: theme('spacing.4'),
            },
            ':is(h2, h3) + *': {
              marginTop: 0,
            },
            // Images
            img: {
              borderRadius: theme('borderRadius.3xl'),
            },
            // Inline elements
            a: {
              color: 'var(--tw-prose-links)',
              fontWeight: theme('fontWeight.semibold'),
              textDecoration: 'none',
              textDecorationColor: 'var(--tw-prose-underline)',
              transitionProperty: 'color, text-decoration-color',
              transitionDuration: theme('transitionDuration.150'),
              transitionTimingFunction: theme(
                'transitionTimingFunction.in-out'
              ),
            },
            'a:hover': {
              color: 'var(--tw-prose-links-hover)',
              textDecoration: 'underline',
              textDecorationColor: 'var(--tw-prose-underline-hover)',
            },
            strong: {
              color: 'var(--tw-prose-bold)',
              fontWeight: theme('fontWeight.semibold'),
            },
            code: {
              display: 'inline-block',
              color: 'var(--tw-prose-code)',
              fontSize: theme('fontSize.sm')[0],
              fontWeight: theme('fontWeight.semibold'),
              backgroundColor: 'var(--tw-prose-code-bg)',
              borderRadius: theme('borderRadius.lg'),
              paddingLeft: theme('spacing.2'),
              paddingRight: theme('spacing.2'),
            },
            'code::before': {
              content: 'none',
            },
            'code::after': {
              content: 'none',
            },
            'a code': {
              color: 'inherit',
            },
            ':is(h2, h3) code': {
              fontWeight: theme('fontWeight.bold'),
            },
            // Quotes
            blockquote: {
              paddingLeft: theme('spacing.6'),
              borderLeftWidth: theme('borderWidth.2'),
              borderLeftColor: 'var(--tw-prose-quote-borders)',
              fontStyle: 'italic',
            },
            // Figures
            figcaption: {
              color: 'var(--tw-prose-captions)',
              fontSize: theme('fontSize.sm')[0],
              lineHeight: theme('lineHeight.6'),
              marginTop: theme('spacing.3'),
            },
            'figcaption > p': {
              margin: 0,
            },
            // Lists
            ul: {
              listStyleType: 'disc',
            },
            ol: {
              listStyleType: 'decimal',
            },
            'ul, ol': {
              paddingLeft: theme('spacing.6'),
            },
            li: {
              marginTop: theme('spacing.3'),
              marginBottom: theme('spacing.3'),
              paddingLeft: theme('spacing[3.5]'),
            },
            'li::marker': {
              fontSize: theme('fontSize.sm')[0],
              fontWeight: theme('fontWeight.semibold'),
            },
            'ol > li::marker': {
              color: 'var(--tw-prose-counters)',
            },
            'ul > li::marker': {
              color: 'var(--tw-prose-bullets)',
            },
            'li :is(ol, ul)': {
              marginTop: theme('spacing.4'),
              marginBottom: theme('spacing.4'),
            },
            'li :is(li, p)': {
              marginTop: theme('spacing.3'),
              marginBottom: theme('spacing.3'),
            },
            // Code blocks
            pre: {
              color: 'var(--tw-prose-pre-code)',
              fontSize: theme('fontSize.sm')[0],
              fontWeight: theme('fontWeight.medium'),
              backgroundColor: 'var(--tw-prose-pre-bg)',
              borderRadius: theme('borderRadius.2xl'),
              borderTopWidth: '1px',
              borderBottomWidth: '1px',
              borderLeftWidth: '1px',
              borderRightWidth: '1px',
              borderColor: 'var(--tw-prose-pre-border)',
              padding: 0,
              overflowX: 'auto',
            },
            'pre .code-title': {
              height: '2.5rem',
              lineHeight: theme('lineHeight.10'),
              position: 'sticky',
              left: 0,
              borderTopLeftRadius: theme('borderRadius.2xl'),
              borderTopRightRadius: theme('borderRadius.2xl'),
              borderBottomWidth: 'inherit',
              borderBottomColor: 'inherit',
              backgroundColor: 'var(--tw-prose-pre-title-bg)',
              paddingLeft: theme('spacing.5'),
            },
            'pre code': {
              display: 'inline',
              color: 'inherit',
              fontSize: 'inherit',
              fontWeight: 'inherit',
              backgroundColor: 'transparent',
              borderRadius: 0,
              padding: theme('spacing.4'),
            },
            // Horizontal rules
            hr: {
              marginTop: theme('spacing.20'),
              marginBottom: theme('spacing.20'),
              borderTopWidth: '1px',
              borderColor: 'var(--tw-prose-hr)',
              '@screen lg': {
                marginLeft: `calc(${theme('spacing.12')} * -1)`,
                marginRight: `calc(${theme('spacing.12')} * -1)`,
              },
            },
            // Tables
            table: {
              width: '100%',
              tableLayout: 'auto',
              wordBreak: 'break-word',
              textAlign: 'left',
              fontSize: theme('fontSize.sm')[0],
            },
            thead: {
              borderBottomWidth: '1px',
              borderBottomColor: 'var(--tw-prose-th-borders)',
            },
            'thead th': {
              color: 'var(--tw-prose-headings)',
              fontWeight: theme('fontWeight.semibold'),
              verticalAlign: 'bottom',
              paddingBottom: theme('spacing.2'),
            },
            'thead th:not(:first-child)': {
              paddingLeft: theme('spacing.2'),
            },
            'thead th:not(:last-child)': {
              paddingRight: theme('spacing.2'),
            },
            'tbody tr': {
              borderBottomWidth: '1px',
              borderBottomColor: 'var(--tw-prose-td-borders)',
            },
            'tbody tr:last-child': {
              borderBottomWidth: 0,
            },
            'tbody td': {
              verticalAlign: 'baseline',
            },
            tfoot: {
              borderTopWidth: '1px',
              borderTopColor: 'var(--tw-prose-th-borders)',
            },
            'tfoot td': {
              verticalAlign: 'top',
            },
            ':is(tbody, tfoot) td': {
              paddingTop: theme('spacing.2'),
              paddingBottom: theme('spacing.2'),
            },
            ':is(tbody, tfoot) td:not(:first-child)': {
              paddingLeft: theme('spacing.2'),
            },
            ':is(tbody, tfoot) td:not(:last-child)': {
              paddingRight: theme('spacing.2'),
            },
          },
        },
      }),
    },
  },
};
export default config;
