.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-color-surface);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-md);
  line-height: var(--ds-leading-md);
  color: var(--ds-color-text);
}

.ds-table__caption {
  padding: var(--ds-space-sm) var(--ds-space-md);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-sm);
  text-align: left;
}

.ds-table__th {
  padding: var(--ds-space-xs) var(--ds-space-md);
  background-color: var(--ds-color-surface-sunken);
  border-bottom: 1px solid var(--ds-color-border);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-sm);
  font-weight: var(--ds-weight-semibold);
  text-align: left;
  white-space: nowrap;
}

.ds-table__td {
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-bottom: 1px solid var(--ds-color-border);
  vertical-align: middle;
}

.ds-table__body tr:last-child .ds-table__td {
  border-bottom: none;
}

.ds-table--compact .ds-table__th {
  padding-block: var(--ds-space-3xs);
}

.ds-table--compact .ds-table__td {
  padding-block: var(--ds-space-2xs);
}

.ds-table--striped .ds-table__row:nth-child(even) {
  background-color: var(--ds-color-surface-sunken);
}

.ds-table--hoverable .ds-table__row:hover {
  background-color: var(--ds-color-surface-hover);
}

.ds-table__cell--start { text-align: left; }
.ds-table__cell--center { text-align: center; }
.ds-table__cell--end { text-align: right; }

.ds-table__empty {
  padding: var(--ds-space-xl) var(--ds-space-md);
  color: var(--ds-color-text-muted);
  text-align: center;
}