.table {
  border-spacing: 0 var(--space-2x);
  width: 100%;
  min-width: max-content;
  overflow: auto;
}

.table thead th {
  padding: var(--space-2x) var(--space-3x);
  text-align: left;
}

.table thead th:first-child {
  padding-left: var(--space-6x);
}

.table thead th:last-child {
  padding-right: var(--space-6x);
}

.table tbody tr td {
  border-block: var(--border-width-primary) solid var(--color-border-primary);
  background-color: white;
  padding: 15px var(--space-3x);
  text-align: left;
}

.table tbody tr td:first-child {
  border-left: var(--border-width-primary) solid var(--color-border-primary);
  border-radius: var(--border-radius-primary) 0 0 var(--border-radius-primary);
  padding-left: var(--space-6x);
}

.table tbody tr td:last-child {
  border-right: var(--border-width-primary) solid var(--color-border-primary);
  border-radius: 0 var(--border-radius-primary) var(--border-radius-primary) 0;
  padding-right: var(--space-6x);
}

.table .highlight-row:is(.active, :active, :focus) {
  outline: none;
}

.table .highlight-row:is(.active, :active, :focus) td {
  border-color: var(--color-border-interactive-focus);
  outline: none;
}

.table :is(.on-row-click, .highlight-row):is(:hover, .hover) td {
  border-color: var(--color-border-secondary);
  outline: none;
  cursor: pointer;
  background-color: var(--color-background-secondary);
}