import { twJoin } from '@/utils'

export const filterContentStyles = twJoin({
	display: 'min-w-48 -mx-2 mb-2 pb-2',
	visual: 'border-b border-divider',
	childs: '[&_svg]:size-4.5',
	//
	dark: {
		visual: 'dark:border-dark-divider'
	}
})

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

export const filterButtonStyles = twJoin({
	display: 'flex w-full items-center px-2 py-1 mt-0.5 first:mt-0',
	visual: 'rounded-sm',
	hover: 'hover:bg-gray-100',
	attrs: [
		'data-[state=checked]:bg-primary/16',
		'data-[state=checked]:[&_span]:text-primary'
	],
	//
	dark: {
		hover: 'dark:[&[data-state="unchecked"]]:hover:bg-dark-gray-800/50'
	}
})

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

export const filterButtonTextStyles = twJoin({
	display: 'inline-flex items-center gap-1.5'
})
