import { twJoin } from '@/utils'

export const contentStyles = twJoin({
	position: 'z-50',
	display: 'w-fit px-3 py-1.5',
	text: 'text-base text-balance text-white',
	animation: 'animate-in fade-in-0 zoom-in-95',
	visual: 'bg-tooltip rounded-md',
	attrs: [
		'data-[side=bottom]:slide-in-from-top-2',
		'data-[side=left]:slide-in-from-right-2',
		'data-[side=right]:slide-in-from-left-2',
		'data-[side=top]:slide-in-from-bottom-2',
		//
		'data-[state=closed]:animate-out',
		'data-[state=closed]:fade-out-0',
		'data-[state=closed]:zoom-out-95'
	],
	vars: 'origin-(--radix-tooltip-content-transform-origin)',
	//
	dark: 'dark:bg-dark-tooltip'
})

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

export const arrowStyles = twJoin({
	position: 'z-50',
	display: 'size-2.5',
	visual: 'bg-tooltip fill-tooltip rounded-xs',
	transform: 'translate-y-[calc(-50%_-_2px)] rotate-45',
	//
	dark: 'dark:bg-dark-tooltip dark:fill-dark-tooltip'
})
