import { twJoin } from '@/utils'

export const rootStyles = twJoin({
	display: 'select-none flex w-full items-center justify-between'
})

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

export const inputStyles = twJoin({
	mouse: '[&::selection]:bg-transparent',
	position: 'relative',
	display: 'flex h-12 w-14 items-center justify-center',
	text: 'text-base text-gray-800 text-center',
	visual: 'border-divider rounded-lg border bg-white outline-none',
	animation: 'transition-all',
	hover: 'hover:border-gray hover:focus-visible:border-primary',
	focus: 'focus-visible:border-primary focus-visible:shadow-primary-sm',
	//
	dark: {
		text: 'dark:text-dark-gray-300',
		visual: 'dark:border-dark-divider dark:bg-dark-gray-900',
		hover: 'dark:hover:border-dark-gray',
		focus: 'dark:focus-visible:shadow-dark-sm',
		attrs: [
			'data-[active=true]:z-10',
			'data-[active=true]:border-primary',
			'data-[active=true]:shadow-primary-sm'
		]
	}
})
