import { twJoin } from '@/utils'

export const contentStyles = twJoin({
	position: 'relative z-50',
	display: 'min-w-15 overflow-x-hidden overflow-y-auto p-2',
	text: 'text-gray-900',
	visual: 'bg-white rounded-md shadow-lg',
	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: [
		'max-h-(--radix-dropdown-menu-content-available-height)',
		'origin-(--radix-dropdown-menu-content-transform-origin)'
	],
	//
	dark: {
		text: 'dark:text-dark-gray-300',
		visual: 'dark:bg-dark-gray-900 dark:shadow-dark-lg'
	}
})
