table {
  --color-table-border: var(--gray-200);
  --color-table-heading-border: var(--gray-300);
  --color-table-heading-text: var(--color-base-header);
  --color-table-content-text: inherit;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  margin-top: var(--space-base);
  margin-bottom: var(--space-base);
  text-align: left;
  font-size: 0.875em;
  line-height: var(--text-leading-lg);
}

thead {
  color: var(--color-table-heading-text);
  font-weight: var(--text-weight-semibold);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-table-heading-border);
}

thead td,
thead th {
  color: var(--color-table-heading-text);
  vertical-align: middle;
  padding-right: var(--space-xs);
  padding-bottom: var(--space-xs);
  padding-left: var(--space-xs);
}

thead td:first-child,
thead th:first-child {
  padding-left: 0;
}

thead td:last-child,
thead th:last-child {
  padding-right: 0;
}

tbody tr {
  border-bottom-width: 1px;
  border-bottom-color: var(--gray-200);
}

tbody tr:last-child {
  border-bottom-width: 0;
}

tbody td {
  vertical-align: top;
  padding-top: var(--space-xs);
  padding-right: var(--space-xs);
  padding-bottom: var(--space-xs);
  padding-left: var(--space-xs);
}

tbody td:first-child {
  padding-left: 0;
}

tbody td:last-child {
  padding-right: 0;
}

/* Dark variant */
.dark-section table {
  --color-table-border: var(--color-graphite-darker);
  --color-table-heading-border: var(--color-graphite-darker);
  --color-table-heading-text: var(--color-alloy);
  --color-table-content-text: var(--color-stainless);
}