@layer base {
  table {
    @apply w-full;
  }

  thead {
    @apply hidden lg:table-header-group;
  }

  tr {
    @apply max-w-full block relative border-b border-slate-200
      lg:table-row dark:border-slate-800;
  }

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

  td:not(:first-child) {
    @apply lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-slate-100 lg:dark:border-slate-700;
  }

  th {
    @apply lg:text-left lg:px-4 lg:py-3 border-b border-slate-200 bg-slate-50 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500;
  }

  th.sortable {
    cursor: pointer;
  }

  th.sortable:hover:after {
    transition: all 1s;
    position: absolute;

    content: '↕';

    margin-left: 1rem;
  }

  th.sortable.asc:hover:after {
    content: '↑';
  }
  th.sortable.desc:hover:after {
    content: '↓';
  }

  td {
    @apply flex justify-between text-right py-3 px-4 align-top border-b border-slate-100
      lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800 dark:text-white;
  }

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

  tbody tr,
  tbody tr:nth-child(odd) {
    @apply bg-white lg:hover:bg-emerald-50/70;
  }

  tbody tr:nth-child(even) {
    @apply lg:bg-slate-50/60 dark:bg-dark-900;
  }

  td:before {
    content: attr(data-label);
    @apply font-semibold pr-3 text-left lg:hidden;
  }

  tbody tr td {
    @apply text-sm font-normal text-slate-700 dark:text-white;
  }

  .datagrid--table,
  .MuiDataGrid-root {
    @apply rounded-xl border-none !important;
  }

  .datagrid--header {
    @apply uppercase tracking-[0.12em] bg-slate-50 text-slate-500 !important;
  }

  .datagrid--header,
  .datagrid--header .MuiIconButton-root,
  .datagrid--cell,
  .datagrid--cell .MuiIconButton-root {
    @apply dark:text-white;
  }

  .datagrid--cell .MuiDataGrid-booleanCell {
    @apply dark:text-white !important;
  }

  .datagrid--cell .MuiIconButton-root:hover {
    @apply dark:text-white dark:bg-dark-700;
  }

  .datagrid--row {
    @apply even:bg-slate-50 hover:bg-emerald-50/70 dark:even:bg-[#1B1D22] dark:odd:bg-dark-900 !important;
  }

  .datagrid--table .MuiTablePagination-root {
    @apply dark:text-white;
  }

  .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled {
    @apply dark:text-dark-700;
  }

  .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover {
    @apply dark:bg-dark-700;
  }

  .MuiButton-colorInherit {
    @apply text-emerald-700 dark:text-dark-700 !important;
  }
}
