// https://github.dev/unocss/unocss/tree/main/examples/vite-vue3
import { defineConfig, presetAttributify, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss';

export default defineConfig({
  theme: {
    // https://unocss.dev/presets/wind#differences-from-tailwind-css
    // https://www.npmjs.com/package/unocss-preset-animations
    // https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion
    animation: {
      keyframes: {
        scalein: '{0% { opacity: 0; transform: scaleY(0.8); } 100% { opacity: 1; transform: scaleY(1); }}',
        fadeout: '{0% { opacity: 1; } 100% { opacity: 0; }}',
      },
      durations: {
        scalein: '0.15s',
        fadeout: '0.15s',
      },
      timingFns: {
        scalein: 'linear',
        fadeout: 'linear',
      },
      properties: {
        scalein: {
          transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)',
        },
        fadeout: {},
      },
      counts: {
        scalein: '1',
        fadeout: '1',
      },
    },

    // https://unocss.dev/config/theme#usage
    colors: {
      // TODO: Add colors
      'surface-0': 'var(--p-surface-0)',
    },
  },

  shortcuts: [
    {
      'logo-transform': 'i-icon:pacman w-6em h-6em transform transition-800',
      pacman: 'i-icon:pacman text-(pink 36)',
    },
  ],
  presets: [
    presetUno({
      /* prefix: "u-", */
    }),

    // https://unocss.dev/presets/rem-to-px
    // presetRemToPx({ baseFontSize: 4 }),

    // https://unocss.dev/presets/attributify
    presetAttributify(),

    // presetIcons({
    //   /*extraProperties: {
    //     display: "inline-block",
    //     "vertical-align": "middle",
    //   },*/
    //   cdn: 'https://esm.sh/',
    //   customizations: {
    //     iconCustomizer(collection, icon, props) {
    //       props.width = '1em';
    //       props.height = '1em';
    //     },
    //   },
    //   collections: {
    //     icon: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
    //       return svg.replace(/#000000|#000/g, 'currentColor');
    //     }),
    //     carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
    //   },
    //   warn: true,
    // }), // https://unocss.dev/presets/icons
  ],
  transformers: [
    //https://unocss.dev/transformers/variant-group
    transformerVariantGroup(),

    // https://unocss.dev/transformers/directives
    transformerDirectives(),
  ],
});

// text-[var(--h-gray-1)]
//  <div class="i-icon:pacman text-(pink 36)" />