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

import { twJoin } from '@/utils'

export const rootStyles = cva(
	twJoin({
		display:
			'flex flex-grow-0 flex-shrink-0 size-9.5 items-center justify-center overflow-hidden',
		text: 'text-gray',
		visual: 'rounded-full outline-none',
		hover: 'hover:bg-gray-200/32',
		attrs: 'data-[state="open"]:bg-gray-200/32',
		childs: '[&_svg]:size-5.5',
		//
		dark: {
			text: 'dark:[&_svg]:text-dark-gray-600',
			hover: 'dark:hover:bg-dark-gray-800/50',
			attrs: ['dark:data-[state=open]:bg-dark-gray-800/50']
		}
	}),
	{
		variants: {
			disabled: {
				true: 'pointer-events-none'
			}
		},
		defaultVariants: {
			disabled: false
		}
	}
)
