/**
 * Responsive data tables.
 *
 * Prefer a native table with `data-table` or `.data-table`. A custom
 * `<data-table>` can be used as an overflow wrapper around a native table;
 * keeping `<table>`, `<th>`, and `<td>` preserves browser table semantics.
 */

:is(data-table, [data-table-scroll], .table-scroll) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--table-radius, var(--radius-md, 0.5rem));
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

:is(table[data-table], table.data-table, data-table > table) {
  width: 100%;
  min-width: var(--table-min-width, 36rem);
  border-spacing: 0;
  border-collapse: separate;
  overflow: hidden;
  color: var(--table-text, var(--text-default, inherit));
  background: var(--table-bg, var(--surface-default, Canvas));
  border: var(--table-border-width, 1px) solid
    var(--table-border-color, var(--outline-subtle, currentColor));
  border-radius: var(--table-radius, var(--radius-md, 0.5rem));
  font-size: var(--table-font-size, var(--font-size-sm, 0.875rem));
}

:is(table[data-table], table.data-table, data-table > table) caption {
  padding-block-end: var(--table-caption-gap, var(--space-sm, 0.5rem));
  color: var(--table-caption-color, var(--text-subtle, currentColor));
  font-weight: var(--font-weight-medium, 500);
  text-align: start;
}

:is(table[data-table], table.data-table, data-table > table) :is(th, td) {
  padding: var(--table-cell-padding-block, var(--space-sm, 0.5rem))
    var(--table-cell-padding-inline, var(--space-md, 1rem));
  border-block-end: 1px solid
    var(--table-divider-color, var(--outline-subtle, currentColor));
  text-align: start;
  vertical-align: middle;
}

:is(table[data-table], table.data-table, data-table > table) th {
  color: var(--table-heading-color, var(--text-overt, inherit));
  background: var(--table-heading-bg, var(--surface-subtle, transparent));
  font-weight: var(--font-weight-semibold, 600);
}

:is(table[data-table], table.data-table, data-table > table) tbody tr:last-child > * {
  border-block-end: 0;
}

:is(table[data-table], table.data-table, data-table > table, .table-striped)
  tbody tr:nth-child(even) {
  background: var(--table-stripe-bg, var(--surface-muted, transparent));
}

:is(table[data-table], table.data-table, data-table > table, .table-hover)
  tbody tr:hover {
  background: var(--table-row-hover-bg, var(--surface-subtle, transparent));
}

:is(table[data-table], table.data-table, data-table > table) :is(a, button):focus-visible {
  outline: var(--focus-ring-width, 2px) solid
    var(--focus-ring-color, Highlight);
  outline-offset: var(--focus-ring-offset, 2px);
}

.table-bordered {
  --table-border-width: var(--border-width-thick, 2px);
}

.table-borderless {
  --table-border-width: 0;
  --table-divider-color: transparent;
}

@media (max-width: 40rem) {
  :is(table[data-table], table.data-table):not(
    :is(data-table, [data-table-scroll], .table-scroll) > table
  ) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  :is(data-table, [data-table-scroll], .table-scroll)
    > :is(table[data-table], table.data-table) {
    display: table;
    overflow: visible;
  }
}