/* data tables  */
.datatable-top {
  @apply flex flex-row items-center justify-between mb-4
}

.datatable-bottom {
  @apply mt-6 flex max-sm:flex-col sm:flex-row gap-4 items-center justify-between mb-4
}

.datatable-search {
  @apply order-1 max-sm:w-full
}

.datatable-search input, .datatable-selector {
  @apply max-sm:w-full py-3 px-4 h-12 border border-black rounded-sm focus:outline-none bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0
}

.datatable-selector {
  @apply min-w-20
}

.datatable-dropdown {
  @apply order-2 max-sm:hidden
}

.datatable-dropdown select {
  @apply me-2
}

.datatable-pagination-list {
  @apply flex flex-row items-center rounded-lg hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_#000000]
}

.datatable-pagination-list li {
  @apply [&.datatable-active_a]:bg-lime-300 dark:[&.datatable-active_a]:bg-lime-300 dark:[&.datatable-active_a]:text-black
}

.datatable-pagination-list li a {
  @apply relative inline-flex items-center justify-center px-4 h-10 leading-tight hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600 -me-px
}

.datatable-pagination-list li:first-child a {
  @apply rounded-l-lg
}

.datatable-pagination-list li:last-child a {
  @apply rounded-r-lg me-0
}

.datatable-sorter {
  padding-right: 1.25rem;
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
}

.datatable-sorter::before,
.datatable-sorter::after {
  content: "";
  position: absolute;
  top: .875rem;
  height: 0px;
  width: 0px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.2;
  inset-inline-end: 4px;
}

.datatable-sorter::before {
  border-top: 4px solid #000;
  bottom: 0px;
}

.datatable-sorter::after {
  border-bottom: 4px solid #000;
  border-top: 4px solid transparent;
  top: 0px;
}

.dark .datatable-sorter::before {
  border-top: 4px solid #fff;
}

.dark .datatable-sorter::after {
  border-bottom: 4px solid #fff;
}

.asc .datatable-sorter::after,
.desc .datatable-sorter::before {
  opacity: 0.6;
}

.datatables-empty {
  text-align: center;
}

/* Tables  */
.table-default,
.table-bordered-bottom {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.table-default thead,
.table-bordered-bottom thead {
  @apply bg-neutral-200 dark:bg-neutral-700
}

.table-default thead tr,
.table-bordered-bottom thead tr {
  display: table-row;
  vertical-align: middle;
}

.table-default thead th,
.table-bordered-bottom thead th {
  @apply px-6 py-4 text-start text-xs font-medium text-black dark:text-white uppercase tracking-wider
}

.table-default tbody {
  @apply bg-white dark:bg-neutral-600 divide-y divide-black
}

.table-default tbody tr td,
.table-bordered-bottom tbody tr td {
  @apply px-6 py-4 whitespace-nowrap
}

.table-default tbody tr,
.table-bordered-bottom tbody tr {
  @apply table-row;
  vertical-align: middle;
}

.table-bordered-bottom thead th,
.table-bordered-bottom tbody tr td,
.table-default tfoot tr td,
.table-bordered-bottom tfoot tr td {
  @apply border-b border-black
}

.table-default tbody tr td, .table-bordered-bottom tbody tr td, .table-default tfoot tr td, .table-bordered-bottom tfoot tr td {
  vertical-align: inherit;
  @apply font-medium text-sm text-neutral-600 dark:text-neutral-400 py-4 px-6;
}

.table-hover tbody tr:hover,
.table-default tbody tr.selected,
.table-bordered-bottom tbody tr:hover {
  @apply bg-lime-200/20 dark:bg-lime-700/50
}

.table-bordered-bottom tbody tr.selected {
  @apply bg-lime-200/20 dark:bg-lime-700/50
}