import { twJoin } from '@/utils'

export const rootStyles = twJoin({
	display: 'flex size-9.5 items-center justify-center',
	visual: 'rounded-full outline-none',
	hover: 'hover:bg-gray-100',
	attrs: 'data-[state="open"]:bg-gray-100',
	childs: [
		'[&_span_span]:hidden',
		'[&_span:has(img)]:size-6.5 [&_span:has(img)]:overflow-hidden [&_span:has(img)]:rounded-full',
		'[&_span_img]:size-6.5 [&_span_img]:object-cover [&_span_img]:object-center [&_span_img]:rounded-full',
	],
	disabled: [
		'disabled:cursor-not-allowed!',
		'disabled:select-none',
		'disabled:opacity-65',
		'disabled:shadow-none'
	],
	//
	dark: {
		hover: 'dark:hover:bg-dark-gray-800/50',
		attrs: ['dark:data-[state=open]:bg-dark-gray-800/50']
	}
})
