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

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .data-table th,
  .data-table td {
    text-align: left;
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  .data-table th {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    white-space: nowrap;
  }

  .data-table th a {
    color: var(--color-ink);
    text-decoration: none;
  }

  .data-table th a:hover {
    text-decoration: underline;
  }

  .data-table th[aria-sort] a {
    color: var(--color-accent);
  }
}