export const classes = {
  'button':
    'inline-block text-center overflow-hidden overflow-ellipsis whitespace-nowrap transition-button duration-300 delay-[0ms] active:transition-all active:scale-[0.95] active:ease-[cubic-bezier(0.33,0,0.67,1)]',
  'button-base-width': 'sm:max-w-[theme(spacing.36)]',
  'size-default': 'h-10 text-sm sm:h-7 sm:text-xs',
  'size-medium': 'h-10 text-sm sm:h-8 sm:text-xs',
  'size-small': 'h-8 text-sm sm:h-7 sm:text-xs',
  'size-mini': 'h-7 sm:h-6 sm:text-xs',
  'type-default': `text-color-text-primary border-color-border hover:border-color-border-hover active:border-color-border-hover sm:cursor-pointer`,
  'type-primary': `text-color-text-inverse border-color-brand bg-color-brand hover:border-color-brand-hover hover:bg-color-brand-hover active:border-color-brand-active active:bg-color-brand-active sm:cursor-pointer`,
  'type-success': `text-color-text-inverse border-color-success bg-color-success hover:border-color-success-hover hover:bg-color-success-hover active:border-color-success-active active:bg-color-success-active sm:cursor-pointer`,
  'type-info': `text-color-text-inverse border-color-info-secondary bg-color-info-secondary hover:border-color-info-secondary-hover hover:bg-color-info-secondary-hover active:border-color-info-secondary-active active:bg-color-info-secondary-active sm:cursor-pointer`,
  'type-warning': `text-color-text-inverse border-color-warning bg-color-warning hover:border-color-warning-hover hover:bg-color-warning-hover active:border-color-warning-active active:bg-color-warning-active sm:cursor-pointer`,
  'type-danger': `text-color-text-inverse border-color-error bg-color-error hover:border-color-error-hover hover:bg-color-error-hover active:border-color-error-active active:bg-color-error-active sm:cursor-pointer`,
  'type-text':
    'border-none bg-transparent cursor-pointer text-color-text-placeholder active:text-color-text-primary sm:hover:text-color-text-primary sm:active:!text-color-brand-active',
  'type-default-disabled': `text-color-text-disabled bg-color-bg-3 border-transparent hover:cursor-not-allowed`,
  'type-primary-disabled':
    'text-color-text-inverse bg-color-brand-disabled border-transparent hover:cursor-not-allowed',
  'type-success-disabled':
    'text-color-text-inverse bg-color-success-disabled border-transparent hover:cursor-not-allowed',
  'type-info-disabled':
    'text-color-text-inverse bg-color-info-secondary-disabled border-transparent hover:cursor-not-allowed',
  'type-warning-disabled':
    'text-color-text-inverse bg-color-alert-disabled border-transparent hover:cursor-not-allowed',
  'type-danger-disabled': 'text-color-text-inverse bg-color-error-disabled border-transparent hover:cursor-not-allowed',
  'type-text-disabled': 'text-color-text-disabled hover:cursor-not-allowed',
  'type-default-plain': `text-color-text-primary border-color-border hover:border-color-border-hover active:border-color-border-hover sm:cursor-pointer`,
  'type-primary-plain': `text-color-brand border-color-brand hover:text-color-brand-hover hover:border-color-brand-hover active:text-color-brand-active active:border-color-brand-active bg-color-bg-1 sm:cursor-pointer`,
  'type-success-plain': `text-color-success border-color-success hover:text-color-success-hover hover:border-color-success-hover active:text-color-success-active active:border-color-success-active bg-color-bg-1 sm:cursor-pointer`,
  'type-info-plain': `text-color-info-secondary border-color-info-secondary hover:text-color-info-secondary-hover hover:border-color-info-secondary-hover active:text-color-info-secondary-active active:border-color-info-secondary-active bg-color-bg-1 sm:cursor-pointer`,
  'type-warning-plain': `text-color-warning border-color-warning hover:text-color-warning-hover hover:border-color-warning-hover active:text-color-warning-active active:border-color-warning-active bg-color-bg-1 sm:cursor-pointer`,
  'type-danger-plain': `text-color-error border-color-error hover:text-color-error-hover hover:border-color-error-hover active:text-color-error-active active:border-color-error-active bg-color-bg-1 sm:cursor-pointer`,
  'type-text-plain': `text-color-brand hover:text-color-brand-hover active:text-color-brand-active`,
  'type-default-plain-disabled':
    'text-color-text-disabled bg-color-bg-1 border-color-text-disabled hover:cursor-not-allowed',
  'type-primary-plain-disabled':
    'text-color-brand-disabled bg-color-bg-1 border-color-brand-disabled hover:cursor-not-allowed',
  'type-success-plain-disabled':
    'text-color-success-disabled bg-color-bg-1 border-color-success-disabled hover:cursor-not-allowed',
  'type-info-plain-disabled':
    'text-color-info-secondary-disabled bg-color-bg-1 border-color-info-secondary-disabled hover:cursor-not-allowed',
  'type-warning-plain-disabled':
    'text-color-alert-disabled bg-color-bg-1 border-color-alert-disabled hover:cursor-not-allowed',
  'type-danger-plain-disabled':
    'text-color-error-disabled bg-color-bg-1 border-color-error-disabled hover:cursor-not-allowed',
  'type-text-plain-disabled': 'text-color-text-disabled hover:cursor-not-allowed',
  'no-round': 'rounded',
  'is-round': 'rounded-full',
  'is-border': 'border-0.5 sm:border',
  'no-circle': 'sm:min-w-[theme(spacing.18)] pl-3 pr-3',
  'is-circle': 'sm:min-w-[theme(spacing.18)] sm:rounded-full sm:pl-2 sm:pr-2',
  'button-icon': '-mt-0.5 sm:text-base fill-current',
  'button-icon-default': 'text-color-icon-primary hover:text-color-icon-hover active:text-color-icon-active',
  'button-icon-disabled': 'text-color-icon-disabled hover:cursor-not-allowed',
  'loading-svg': 'animate-spin-2 mr-1 fill-current -left-0.5 -right-0.5 -top-0.5 -bottom-0.5',
  'button-link':
    'text-color-link hover:text-color-link-hover active:color-link-hover active:hover:text-color-link-hover sm:hover:text-color-link-hover',
  'button-banner': ' w-[calc(100%-theme(spacing.8))] mx-4'
}
