import { cva } from 'class-variance-authority'

import { twJoin } from '@/utils'

export const overlayStyles = cva(
	twJoin({
		position: 'fixed z-50 inset-0',
		visual: 'bg-black/15',
		attrs: [
			'data-[state=open]:animate-in',
			'data-[state=open]:fade-in-0',
			'data-[state=closed]:animate-out',
			'data-[state=closed]:fade-out-0'
		]
	}),
	{
		variants: {
			blur: {
				true: 'backdrop-blur-xs'
			}
		},
		defaultVariants: {
			blur: false
		}
	}
)

// /////////////////////////

export const contentStyles = twJoin({
	position: 'fixed z-50 top-1/2 left-1/2',
	display: 'flex flex-col p-6',
	visual: 'bg-white rounded-md shadow-lg',
	transform: '-translate-x-1/2 -translate-y-1/2',
	animation: 'duration-200',
	attrs: [
		'data-[state=open]:animate-in',
		'data-[state=open]:fade-in-0',
		'data-[state=open]:zoom-in-95',
		//
		'data-[state=closed]:animate-out',
		'data-[state=closed]:fade-out-0',
		'data-[state=closed]:zoom-out-95'
	],
	//
	dark: {
		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-lg'
	}
})

// /////////////////////////

export const closeStyles = twJoin({
	position: 'absolute top-0 right-0',
	display: 'size-8 p-1.5 -mt-3 -mr-3',
	visual: 'bg-white rounded-md shadow-sm outline-none',
	animation: 'transition-[all_.23s_ease_.1s]',
	childs: {
		mouse: '[&_svg]:pointer-events-none',
		display: '[&_svg]:size-5',
		text: '[&_svg]:text-gray'
	},
	hover: 'hover:translate-y-1.5 hover:-translate-x-1.5',
	//
	dark: {
		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-sm',
		childs: {
			text: 'dark:[&_svg]:text-dark-gray-600'
		}
	}
})
