@scope (.data-table) {
  :scope {
    --_border: var(--color-border-muted);
    --_stripe: var(--color-surface-muted);
    --_header-bg: var(--color-surface);

    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
  }

  thead {
    background: var(--_header-bg);
    border-bottom: 2px solid var(--color-border);
  }

  th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
  }

  td {
    padding: var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--_border);
    color: var(--color-text);
    vertical-align: middle;
  }

  tbody tr {
    &:hover {
      background: var(--_stripe);
    }
  }

  .cell-numeric,
  .cell-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  tfoot td {
    padding: var(--space-md);
    border-bottom: none;
    border-top: 2px solid var(--color-border);
    background: var(--color-surface-muted);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
  }

  .cell-actions {
    text-align: right;
    white-space: nowrap;

    > * {
      display: inline-flex;
      vertical-align: middle;
    }

    form {
      display: inline;
    }
  }
}