@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,
  .data-table__cell--numeric {
    text-align: right;
    font-family: var(--font-mono);
    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;
    }
  }

  .data-table__sortable {
    padding: 0;
  }

  .data-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    text-transform: inherit;

    &:hover {
      color: var(--color-text);
    }

    .icon {
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      overflow: visible;
      opacity: 0.4;
      fill: currentColor;

      path {
        fill: currentColor;
      }
    }

    &.is-sorted .icon {
      opacity: 1;
      color: var(--color-text);
    }
  }

  th.cell-number .data-table__sort {
    justify-content: flex-end;
  }

  .data-table__sort-rank {
    font-size: 0.75em;
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
  }
}