import { tv } from 'tailwind-variants';

export const styles = tv({
  base: 'inline-block transition-colors disabled:pointer-events-none disabled:opacity-50',
  variants: {
    size: {
      xsmall: 'size-2 min-h-2 min-w-2',
      small: 'size-3 min-h-3 min-w-3',
      medium: 'size-4 min-h-4 min-w-4',
      large: 'size-6 min-h-6 min-w-6',
      xlarge: 'size-8 min-h-8 min-w-8',
    },
    color: {
      muted: 'text-surface-muted',
      'muted-vivid': 'text-surface-muted-vivid',
      'muted-strong': 'text-surface-muted-strong',
      'muted-mild': 'text-surface-muted-mild',
      'muted-soft': 'text-surface-muted-soft',
      'muted-pale': 'text-surface-muted-pale',
      'muted-faint': 'text-surface-muted-faint',
      'white-pale': 'text-background-white',
      'white-faint': 'text-background-white',
      mono: 'text-surface-mono',
      primary: 'text-surface-primary',
      'primary-faint': 'text-surface-primary-faint',
      hero: 'text-surface-hero',
      'hero-faint': 'text-surface-hero-faint',
      pop: 'text-surface-pop',
      'pop-faint': 'text-surface-pop-faint',
      holler: 'text-surface-holler',
      'holler-faint': 'text-surface-holler-faint',
      success: 'text-surface-success',
      'success-faint': 'text-surface-success-faint',
      info: 'text-surface-info',
      'info-faint': 'text-surface-info-faint',
      warning: 'text-surface-warning',
      'warning-faint': 'text-surface-warning-faint',
      danger: 'text-surface-danger',
      'danger-faint': 'text-surface-danger-faint',
      'system-error': 'text-surface-system-error',
      'system-error-dark': 'text-surface-system-error-dark',
      reversed: 'text-surface-reversed',
    },
  },
});