import { defineConfig, presetMini, presetIcons } from 'unocss';

export default defineConfig({
    presets: [
        presetMini(),
        presetIcons()
    ],
    rules: [
        ['object-cover', { 'object-fit': 'cover' }],
        ['backdrop-blur-md', { 'backdrop-filter': 'blur(12px)' }],
        ['backdrop-filter-none', { 'backdrop-filter': 'none' }],
    ],
    variants: [
        // match tailwindCSS's hoverOnlyWhenSupported feature
        (matcher) => {
            if (!matcher.startsWith('@hover:'))
                return matcher

            return {
                matcher: matcher.slice(7),
                parent: '@media (hover: hover) and (pointer: fine)',
                selector: s => `${s}:hover`,
            }
        },
    ],
});