.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-font-size-s);
  color: var(--ui-color-text);
  border: var(--ui-border-width) var(--ui-border-style) var(--ui-color-border);
}
.ui-table th,
.ui-table td {
  padding: 0.625rem 0.875rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--ui-border-width) var(--ui-border-style) var(--ui-color-border);
}
.ui-table th {
  font-weight: var(--ui-font-weight-semibold);
  font-size: var(--ui-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-color-text-muted);
  white-space: nowrap;
  background: var(--ui-color-base);
}
.ui-table tbody tr:last-child td {
  border-bottom: none;
}

.ui-table-divider th,
.ui-table-divider td {
  border-right: var(--ui-border-width) var(--ui-border-style) var(--ui-color-border);
}
.ui-table-divider th:last-child,
.ui-table-divider td:last-child {
  border-right: none;
}

.ui-table-striped tbody tr:nth-child(odd) {
  background: var(--ui-color-surface);
}
.ui-table-striped tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ui-color-border) 35%, transparent);
}

.ui-table-hover tbody tr {
  transition: background var(--ui-duration-fast) var(--ui-easing-default);
}
.ui-table-hover tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.ui-table\@xs th,
.ui-table\@xs td {
  padding: 0.25rem 0.5rem;
  font-size: var(--ui-font-size-xs);
}
.ui-table\@s th,
.ui-table\@s td {
  padding: 0.4rem 0.65rem;
  font-size: var(--ui-font-size-xs);
}
.ui-table\@l th,
.ui-table\@l td {
  padding: 0.75rem 1rem;
  font-size: var(--ui-font-size-m);
}
.ui-table\@xl th,
.ui-table\@xl td {
  padding: 1rem 1.25rem;
  font-size: var(--ui-font-size-m);
}

.ui-table th.shrink,
.ui-table td.shrink {
  width: 1px;
  white-space: nowrap;
}
.ui-table th.expand,
.ui-table td.expand {
  width: 100%;
}