import { twJoin } from '@/utils'

export const rootStyles = twJoin({
	display: 'flex items-center px-4 py-2 mt-0.5 first:mt-0',
	text: 'text-base',
	visual: 'rounded-md outline-none',
	animation: 'transition-(color,bg) duration-300',
	hover: [
		'hover:cursor-pointer',
		'data-[state="unchecked"]:hover:bg-gray-100'
	],
	attrs: [
		'data-[state="checked"]:text-primary',
		'data-[state="checked"]:bg-primary/16'
	],
	childs: [
		'[&_span]:flex [&_span]:items-center',
		'[&_span_svg]:size-4.5 [&_span_svg]:mr-3'
	],
	//
	dark: 'dark:[&[data-state="unchecked"]]:hover:bg-dark-gray-800/50'
})
