@layer components {
  .data-table {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-block: var(--border-width) solid var(--color-border);
  }

  .data-table::-webkit-scrollbar {
    display: none;
  }

  .data-table__table {
    inline-size: var(--size-fill);
    border-collapse: collapse;
    font: var(--type-body-sm);
    color: var(--color-ink);
  }

  .data-table__caption {
    padding-block: var(--space-5) var(--space-4);
    font: var(--type-heading);
    color: var(--color-ink-display);
    text-align: start;
  }

  .data-table__heading {
    padding: var(--space-4) var(--space-5);
    font: var(--type-label);
    color: var(--color-ink-muted);
    text-align: start;
    white-space: nowrap;
    border-block-end: var(--border-width) solid var(--color-border-strong);
  }

  .data-table__cell {
    padding: var(--space-5);
    vertical-align: baseline;
    white-space: nowrap;
  }

  .data-table__row + .data-table__row .data-table__cell {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .data-table__heading:first-child,
  .data-table__cell:first-child {
    padding-inline-start: var(--space-0);
  }

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

  .data-table__cell--numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  .data-table__cell--action {
    text-align: end;
  }

  .data-table__cell--action a {
    color: var(--color-link);
  }
}