.table {
  @apply rounded-box text-left text-sm rtl:text-right;
  :where(th, td) {
    @apply px-4 py-3 align-middle;
  }
  tr.active,
  tr.active:nth-child(even),
  &-zebra tbody tr:nth-child(even) {
    @apply bg-base-200;
  }
  tr.hover,
  tr.hover:nth-child(even) {
    @apply [@media(hover:hover)]:hover:bg-base-200;
  }

  &-zebra {
    tr.active,
    tr.active:nth-child(even),
    &-zebra tbody tr:nth-child(even) {
      @apply bg-base-300;
    }
  }
  &-zebra tr.hover,
  &-zebra tr.hover:nth-child(even) {
    @apply [@media(hover:hover)]:hover:bg-base-300;
  }

  :where(thead tr, tbody tr:not(:last-child),tbody tr:first-child:last-child) {
    @apply border-b-base-200 border-b;
  }

  :where(thead, tfoot) {
    @apply text-base-content/60 whitespace-nowrap text-xs font-bold;
  }

  :where(tfoot) {
    @apply border-t-base-200 border-t;
  }
}
