import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
import typography from 'windicss/plugin/typography'

export default defineConfig({
  darkMode: 'class',
  // https://windicss.org/posts/v30.html#attributify-mode
  attributify: true,

  plugins: [
    typography(),
  ],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '65ch',
            color: 'inherit',
            a: {
              'color': 'inherit',
              'opacity': 0.75,
              'fontWeight': '500',
              'textDecoration': 'underline',
              '&:hover': {
                opacity: 1,
                color: colors.teal[600],
              },
            },
            b: { color: 'inherit' },
            strong: { color: 'inherit' },
            em: { color: 'inherit' },
            h1: { color: 'inherit' },
            h2: { color: 'inherit' },
            h3: { color: 'inherit' },
            h4: { color: 'inherit' },
            code: { color: 'inherit' },
          },
        },
      },
    },
  },
  shortcuts: {
    'cont-box': {
      'border-color': 'rgb(128 128 128 / 41%)',
      'border-radius': '5px',
      'background-color': 'rgb(55 65 81 / 12%)',
      // 'background-color': 'rgb(8 8 8 / 25%)',
      '@apply': 'border border-opacity-10 p-2',
    },
    'dark cont-box': { 'background-color': 'rgb(55 65 81 / 38%)' },
    'box': {
      'border-color': 'lightslategray',
      '@apply':
        'py-5 px-5 max-w-sm mx-auto border border-opacity-10 '
        + 'bg-white dark:bg-gray-800 dark:bg-opacity-90 '
        + 'rounded-xl shadow-m space-y-2 '
        + 'sm:py-6 sm:items-center sm:space-y-0 sm:space-x-6 ',
    },
    'btn': {
      '@apply':
        'px-4 py-1 text-sm text-purple-600 font-semibold '
        + 'rounded-full border border-purple-200 dark:border-purple-800 '
        + 'hover:text-white hover:bg-purple-600 hover:border-transparent '
        + 'focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 ',
    },
    'cloud': {
      'background-image': 'url("data:image/svg+xml;utf8, <svg id=\'bd4c6c15-bf8d-47da-8605-04f25f1e9487\' data-name=\'Capa 1\' xmlns=\'http://www.w3.org/2000/svg\' width=\'76.15\' height=\'51.53\' viewBox=\'0 0 76.15 51.53\'><title>cloud_blue</title><path d=\'M171.78,71.73h-45.4a14.26,14.26,0,0,1-2-28.38.66.66,0,0,0,.56-.71,14.31,14.31,0,0,1-.07-1.51,18.32,18.32,0,0,1,36.43-2.73A.65.65,0,0,0,162,39h.33a14.31,14.31,0,0,1,14.2,13.11.63.63,0,0,0,.24.43,3.43,3.43,0,0,1,.56.07,4.4,4.4,0,0,1,1.1-1c-.21-.06-.43-.11-.65-.15a15.63,15.63,0,0,0-15.23-13.8,19.61,19.61,0,0,0-38.92,3.48q0,.54,0,1A15.56,15.56,0,0,0,126.38,73h45.4a.65.65,0,0,0,0-1.3Z\' transform=\'translate(-110.83 -21.5)\' style=\'fill:rgb(0,158,219)\'/><path d=\'M130.56,39.18a.66.66,0,0,1-.65-.65,12.07,12.07,0,0,1,12.05-12,.65.65,0,1,1,0,1.3,10.76,10.76,0,0,0-10.75,10.75A.66.66,0,0,1,130.56,39.18Z\' transform=\'translate(-110.83 -21.5)\' style=\'fill:rgb(0,158,219)\'/><path d=\'M177.75,51.32c0-.15-.05-.29-.08-.45a5.42,5.42,0,0,1-1.22.68c0,.12,0,.24.05.36a.64.64,0,0,0,.56.57,9.67,9.67,0,0,1-1.44,19.27H162.55a5.24,5.24,0,0,1-.1,1.25h13.17a10.91,10.91,0,0,0,2.13-21.68Z\' transform=\'translate(-110.83 -21.5)\' style=\'fill:rgb(0,158,219)\'/></svg>")',
    },
  },
})