import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
import presetAnimations from 'unocss-preset-animations';
import { presetShadcn } from 'unocss-preset-shadcn';
import { colors } from 'unocss/preset-mini';

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetAnimations(),
    presetShadcn({}),
    presetIcons({
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
  ],

  rules: [
    ['text-flow', { 'text-overflow': 'ellipsis', 'white-space': 'nowrap', overflow: 'hidden' }],
    [
      /^text-overflow-(\d+)$/,
      ([, d]) => ({
        overflow: 'hidden',
        'text-overflow': 'ellipsis',
        display: '-webkit-box',
        '-webkit-line-clamp': parseInt(d),
        /* autoprefixer: ignore next */
        '-webkit-box-orient': 'vertical',
      }),
    ],
  ],

  shortcuts: [
    {
      'switch-animation': 'transition duration-300',
      'bg-base': 'bg-[#fff] dark:bg-[#20202a] switch-animation',
      'card-base': 'bg-[#ffffff] dark:bg-[#10101a] switch-animation',
      'text-base': 'text-[rgba(0,0,0,0.95)] dark:text-[#f0f0f0] switch-animation',
      'switch-label-base': 'bg-gray-200 dark:bg-gray-800 switch-animation',
      'switch-span-base': 'bg-white dark:bg-gray-300 switch-animation',
      'text-overflow': 'overflow-hidden whitespace-nowrap truncate',
    },
  ],

  theme: {
    colors: {
      brand: 'var(--primary-color)',
    },
    extend: {
      'border-half': {
        position: 'relative',
        '::after': {
          content: '',
          display: 'block',
          position: 'absolute',
          left: '-50%',
          top: '-50%',
          width: '200%',
          height: '200%',
          border: '1px solid red',
          transform: 'scale(0.5)',
          '-webkit-transform': 'scale(0.5)',
        },
      },
    },
  },
});