:where(.table) {
  caption-side: bottom;
  font-size: var(--text-sm);
  inline-size: var(--size-full);

  caption {
    color: var(--color-text-subtle);
    margin-block-start: var(--size-4);
  }

  thead {
    background-color: light-dark(var(--gray-100), var(--neutral-800));
    color: var(--color-text);
  }

  tbody tr {
    border-block-start-width: var(--border);
  }

  tr:hover {
    background-color: rgb(from var(--color-border-light) r g b / .5);
  }

  th {
    font-weight: var(--font-medium);
    text-align: start;
  }

  th,
  td {
    padding: var(--size-2);
  }

  tfoot {
    background-color: rgb(from var(--color-border-light) r g b / .5);
    border-block-start-width: var(--border);
    font-weight: var(--font-medium);
  }
}

/* customizations */

/* This is the table on the regular pages */
.table-wrapper {
  background-color: var(--color-surface);
  padding: var(--size-6);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-sm);
  color: light-dark(#4c616b, oklch(0.72 0.02 256.54));
}

.table-wrapper .table-scroll-wrapper {
  max-block-size: 60dvh;
  border-width: 1px;
  border-color: light-dark(#e9e9e9, var(--color-border-light));
  border-radius: var(--rounded-sm);
  overflow: auto;
  inline-size: 100%;
  margin-block-end: var(--size-4);
}

.table-wrapper tbody {
  background-color: transparent;

  >tr {
    border-color: var(--color-border-light);
  }
}

.table-wrapper .table-scroll-wrapper .table th,
.table-wrapper .table-scroll-wrapper .table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 1rem;
  padding-block: .4rem;
  max-inline-size: 25ch;
}

/* Grid container with sticky header and footer */
.grid-container {
  display: grid;
  grid-template-rows: 1fr auto;
  block-size: 100%;
}

.table-wrapper .table-scroll-wrapper,
.grid-container .table-scroll-wrapper {
  scrollbar-color: transparent transparent;
  overflow: auto;

  &:hover {
    scrollbar-color: var(--color-border) transparent;
  }

}

.table-wrapper .table-scroll-wrapper .table,
.grid-container .table {
  inline-size: max-content;
  min-inline-size: 100%;
}

.table-wrapper .table-scroll-wrapper thead,
.grid-container thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

.grid-container tbody tr {
  border-style: dotted;
  border-block-end-width: var(--border);
  border-block-start-width: none;
}

.grid-container th,
.grid-container td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 1rem;
  padding-block: .4rem;
  border-right: 1px solid var(--color-border);
}

.grid-container td {
  font-size: var(--text-xs);
  color: oklch(from var(--color-text) l c h / 0.85);
}

.grid-container th,
.grid-container td[data-data-type="string"],
.grid-container td[data-data-type="binary"] {
  max-inline-size: 20ch;
}

.grid-container td[data-data-type="bigint"],
.grid-container td[data-data-type="decimal"],
.grid-container td[data-data-type="integer"] {
  text-align: end;
}

/* Hide show action buttons on tables */
td:has(.action-text) {
  display: grid;

  >.action-text,
  >.active-actions {
    grid-area: 1 / 1;
  }
}

td>.active-actions {
  visibility: hidden;
}

tr:has(.active-actions):hover {
  >td .active-actions {
    visibility: visible;
  }

  >td>.action-text {
    visibility: hidden;
  }
}