@layer components {
  /* dataTable */
  .datatable {
    @apply overflow-hidden rounded-md border border-primary/10;
  }

  table.dataTable {
    @apply w-full;

    /* table {
            @apply !border-separate !border-spacing-0;
        } */

    thead {
      &.sticky-top {
        @apply sticky top-0 z-10 bg-white dark:bg-dark;
      }
    }

    tr th {
      @apply border-b-2 border-primary bg-white px-6 py-3 text-base text-primary;
    }

    tr {
      td {
        @apply border-b border-primary/10 bg-white px-6 py-3 text-primary transition-[background-color] duration-200;
      }

      &:nth-child(even) {
        td {
          @apply bg-gray-50;
        }
      }

      &:hover {
        td {
          @apply bg-gray-100;
        }
      }

      &:last-child {
        td {
          @apply border-b-0;
        }
      }
    }

    .btn-group {
      @apply shrink-0;
    }
  }

  thead > tr > th.dt-ordering-asc span.dt-column-order:before,
  thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    @apply !opacity-100;
  }

  thead > tr > th.dt-orderable-asc span.dt-column-order:before,
  thead > tr > th.dt-orderable-asc span.dt-column-order:after {
    @apply text-primary;
  }
}