export const ui = {
  wrapper: 'relative overflow-x-auto rounded bg-white dark:bg-gray-900',
  base: 'min-w-full table-fixed ',
  divide: '',
  thead: 'relative bg-gray-100 dark:bg-[#E3E5E81A]',
  tbody: '',
  tr: {
    base: 'even:bg-gray-50 dark:even:bg-[#E3E5E81A]',
    selected: 'bg-gray-50 dark:bg-gray-800/50',
    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
  },
  th: {
    base: 'text-left rtl:text-right',
    padding: 'px-4 py-3.5',
    color: 'text-deepblue-900 dark:text-gray-200',
    font: 'font-semibold',
    size: 'text-xs',
  },
  td: {
    base: '',
    padding: {
      sm: 'px-3 py-2',
      md: 'px-4 py-4'
    },
    color: 'text-deepblue-900 dark:text-gray-200',
    font: '',
    size: 'text-sm',
  },
  progress: {
    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
  },
}