import { tv } from 'tailwind-variants';

export default tv({
  slots: {
    container: 'relative flex flex-col justify-center items-start bg-white',
    base: [
      'h-9',
      'flex',
      'items-center',
      'text-sm',
      'text-dabeeo-black-34',
      'leading-[18px]',
      'border',
      'border-dabeeo-gray-be',
      'has-data-focused:border-dabeeo-black-34',
      'has-data-hovered:border-dabeeo-black-34',
      'has-data-disabled:bg-dabeeo-gray-eb',
      'has-data-disabled:text-dabeeo-gray-99',
      'has-data-disabled:border-dabeeo-gray-be',
      'has-data-invalid:border-dabeeo-red',
      'has-data-invalid:has-data-focused:border-dabeeo-red',
      'has-data-invalid:has-data-hovered:border-dabeeo-red',
      'w-full',
      'has-[[type=number]]:leading-6',
    ],
    input: ['w-full', 'px-3', 'outline-0', '[&[type=number]]:pr-1.5'],
  },
  variants: {
    isReadOnly: {
      true: {
        base: 'bg-dabeeo-yellow-secondary has-data-hovered:border-dabeeo-gray-be has-data-focused:border-dabeeo-gray-be',
      },
    },
  },
});
