export const classes = {
  'steps-advanced': 'w-full flex text-color-text text-xs leading-4',
  'steps-block':
    'flex rounded-sm relative cursor-pointer group text-color-text-primary bg-color-bg-2 hover:bg-gray-100',
  'steps-block-error': 'text-color-error bg-color-error-subtler hover:bg-red-100',
  'steps-block-disabled': 'text-color-text-disabled hover:bg-color-bg-2',
  'steps-block-done': 'bg-blue-50 hover:bg-blue-100',
  'steps-block-doing': 'bg-blue-50 hover:bg-brand-400',
  'steps-block-error-active': 'bg-red-500 hover:bg-red-500',
  'steps-block-disabled-active': 'bg-color-bg-2 hover:bg-color-bg-2',
  'steps-block-done-active': 'bg-color-brand hover:bg-color-brand',
  'steps-block-doing-active': 'bg-color-brand hover:bg-color-brand',
  'steps-text': 'group flex-auto max-w-full truncate text-gray-500',
  'steps-text-error': 'text-gray-900',
  'steps-text-disabled': 'text-gray-200',
  'steps-text-done': 'text-gray-900',
  'steps-text-doing': 'group-hover:text-color-text-inverse text-gray-900',
  'steps-content': 'flex-auto flex max-w-full items-center justify-center px-4 overflow-hidden h-full'
}
