// effect: dark / light / plain
// type: success / alerting / warning / error / default / info
export const classes = {
  'dark-success': 'text-color-text-inverse bg-color-success',
  'dark-alerting': 'text-color-text-inverse bg-color-alert',
  'dark-warning': 'text-color-text-inverse bg-color-warning',
  'dark-error': 'text-color-text-inverse bg-color-error',
  'dark-default': 'text-color-text-inverse bg-color-info-primary',
  'dark-info': 'text-color-text-inverse bg-color-text-placeholder',
  'dark-pink': 'text-color-text-inverse bg-color-chart-17',
  'dark-purple': 'text-color-text-inverse bg-color-chart-11',
  'dark-cyan': 'text-color-text-inverse bg-color-chart-2',

  'light-success': 'text-color-success bg-color-success-subtler',
  'light-alerting': 'text-color-alert bg-color-alert-subtler',
  'light-warning': 'text-color-warning-hover bg-color-warning-subtler',
  'light-error': 'text-color-error bg-color-error-subtler',
  'light-default': 'text-color-info-primary bg-color-info-primary-subtler',
  'light-info': 'text-color-text-primary bg-color-bg-2',
  'light-pink': 'text-color-chart-17 bg-color-chart-17-subtler',
  'light-purple': 'text-color-chart-11 bg-color-chart-11-subtler',
  'light-cyan': 'text-color-chart-2 bg-color-chart-2-subtler',

  'plain-success': 'text-color-success bg-color-bg-1',
  'plain-alerting': 'text-color-alert bg-color-bg-1',
  'plain-warning': 'text-color-warning-hover bg-color-bg-1',
  'plain-error': 'text-color-error bg-color-bg-1',
  'plain-default': 'text-color-info-primary bg-color-bg-1',
  'plain-info': 'text-color-text-primary bg-color-bg-1',
  'plain-pink': 'text-color-chart-17 bg-color-bg-1',
  'plain-purple': 'text-color-chart-11 bg-color-bg-1',
  'plain-cyan': 'text-color-chart-2 bg-color-bg-1',

  'success-border': 'border-color-success-subtle',
  'alerting-border': 'border-color-alert-subtle',
  'warning-border': 'border-color-warning-subtle',
  'error-border': 'border-color-error-subtle',
  'default-border': 'border-color-info-primary-subtle',
  'info-border': 'border-color-none',
  'pink-border': 'border-color-chart-17-subtle',
  'purple-border': 'border-color-chart-11-subtle',
  'cyan-border': 'border-color-chart-2-subtle',

  'fill-dark': 'fill-color-bg-6 hover:fill-color-icon-inverse',

  'fill-light-success': 'fill-color-success-subtle hover:fill-color-success',
  'fill-light-alerting': 'fill-color-alert-subtle hover:fill-color-alert',
  'fill-light-warning': 'fill-color-warning-subtle hover:fill-color-warning',
  'fill-light-error': 'fill-color-error-subtle hover:fill-color-error',
  'fill-light-default': 'fill-color-info-primary-subtle hover:fill-color-info-primary',
  'fill-light-info': 'fill-color-none hover:fill-color-none',
  'fill-light-pink': 'fill-color-chart-17-subtle hover:fill-color-chart-17',
  'fill-light-purple': 'fill-color-chart-11-subtle hover:fill-color-chart-11',
  'fill-light-cyan': 'fill-color-chart-2-subtle hover:fill-color-chart-2',

  'selectable-unselect': 'h-9 sm:h-7 text-color-text-primary bg-color-bg-4 cursor-pointer hover:bg-color-fill-1',
  'selectable-selected':
    'h-9 sm:h-7 text-color-brand border-current bg-color-info-primary-subtler cursor-pointer hover:text-color-brand-hover',
  'tag-disabled':
    'h-9 sm:h-7 text-color-text-disabled bg-color-bg-4 border-transparent cursor-not-allowed hover:text-color-text-disabled hover:bg-color-bg-4',
  'tag-operable': 'h-7 sm:h-6 cursor-pointer',

  'medium': 'h-7 px-3',
  'small': 'h-6 px-2',
  'mini': 'h-5 px-1'
}
