import { twJoin } from '@/utils'

export const rootStyles = twJoin({
	tw: 'peer group-has-[input]/label:mr-0.5',
	display: 'flex justify-center items-center size-4.5 shrink-0',
	visual: 'border-divider rounded-full border outline-none',
	animation: 'transition-all',
	hover: [
		'hover:cursor-pointer',
		'group-hover/label:border-gray',
		'group-hover/label:data-[state=checked]:border-transparent'
	],
	attrs: [
		'data-[state=checked]:text-white',
		'data-[state=checked]:bg-primary',
		'data-[state=checked]:border-primary',
		'data-[state=checked]:shadow-primary-sm',
		'data-[state=checked]:hover:shadow-primary'
	],
	//
	dark: [
		'dark:border-dark-gray-200',
		'dark:data-[state=checked]:shadow-dark-sm',
		'dark:data-[state=checked]:hover:shadow-dark-md',
		'dark:group-hover/label:border-dark-gray-400'
	]
})

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

export const indicatorStyles = twJoin({
	display: 'flex size-2',
	visual: 'bg-white rounded-full',
	animation: 'transition-none'
})
