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

import { twJoin } from '@/utils'

export const rootStyles = twJoin({
	tw: 'group/input',
	position: 'relative'
})

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

export const inputStyles = cva('', {
	variants: {
		size: {
			sm: '!w-53',
			md: '!w-66.5',
			lg: ''
		}
	},
	defaultVariants: {
		size: 'md'
	}
})

export type InputStylesProps = VariantProps<typeof inputStyles>

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

export const iconStyles = cva(
	twJoin({
		mouse: 'cursor-pointer',
		position: 'absolute',
		text: 'text-gray',
		hover: {
			text: 'hover:text-primary-300'
		},
		attrs: {
			text: 'data-[state=open]:text-primary'
		}
	}),
	{
		variants: {
			size: {
				sm: 'top-1.5 right-2.5 size-4',
				md: 'top-2 right-3 size-5.5',
				lg: 'top-2.5 right-3.5 size-7'
			}
		},
		defaultVariants: {
			size: 'md'
		}
	}
)
