.data-table {
  container-type: inline-size;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  max-block-size: 70dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(to right, var(--color-surface) 60%, transparent) 0 0 / 48px 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 60%, transparent) 100% 0 / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--color-scroll-shade), transparent) 0 0 / 24px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--color-scroll-shade), transparent) 100% 0 / 24px 100% no-repeat scroll,
    var(--color-surface);
}

.data-table__table {
  inline-size: 100%;
  border-collapse: collapse;
}

.data-table__table thead {
  background: var(--color-surface-alt);
  border-block-end: 1px solid var(--color-border);
}

.data-table__head {
  text-align: start;
  padding-block: var(--space-row);
  padding-inline: var(--cell-pad-x);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: calc(var(--z-base) + 1);
  background: var(--color-surface-alt);
}

.data-table__cell {
  padding-block: var(--space-row);
  padding-inline: var(--cell-pad-x);
  border-block-end: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
}

.data-table__row:last-child .data-table__cell {
  border-block-end: 0;
}

.data-table__cell:first-child {
  font-weight: var(--weight-medium);
  background: var(--color-surface);
}

.data-table__head:first-child {
  white-space: normal;
}

.data-table__lead {
  display: block;
  inline-size: max-content;
  max-inline-size: calc(40cqi - var(--space-card) - var(--cell-pad-x));
  overflow-wrap: anywhere;
}

.data-table__head:first-child,
.data-table__cell:first-child {
  position: sticky;
  inset-inline-start: 0;
  padding-inline-start: var(--space-card);
  border-inline-end: 1px solid var(--color-border-light);
}

.data-table__cell:first-child {
  z-index: var(--z-base);
}

.data-table__head:first-child {
  z-index: calc(var(--z-base) + 2);
}

.data-table__head:last-child,
.data-table__cell:last-child {
  padding-inline-end: var(--space-card);
}