@layer components {
  .table-scroll { overflow-x: auto; }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;

    & th, & td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); text-align: end; white-space: nowrap; }
    & th:first-child, & td:first-child { text-align: start; }
    & thead th { border-top: 0; color: var(--ink-muted); font-weight: 600; }
    & tfoot td { font-weight: 650; }
  }

  .table--compact {
    & th, & td { padding-inline: var(--space-1); }
    & th:first-child, & td:first-child { padding-inline-start: 0; }
    & th:last-child, & td:last-child { padding-inline-end: 0; }
  }
}