import { twJoin } from '@/utils'

export const contentStyles = twJoin({
	position: 'z-50',
	display: 'w-auto overflow-hidden',
	text: 'text-gray-800',
	visual: ['bg-white', 'rounded-md', 'shadow-lg', 'outline-hidden'],
	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',
		//
		'data-[side=top]:slide-in-from-bottom-2',
		'data-[side=right]:slide-in-from-left-2',
		'data-[side=bottom]:slide-in-from-top-2',
		'data-[side=left]:slide-in-from-right-2'
	],
	vars: 'origin-(--radix-popover-content-transform-origin)',
	//
	dark: {
		text: 'dark:text-dark-gray-300',
		visual: 'dark:bg-tooltip dark:shadow-dark-lg'
	}
})
