.wf-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-4);
  background: var(--wf-surface);
}

.wf-table-wrap--sticky {
  contain: inline-size;
  max-height: min(70dvh, 680px);
  overscroll-behavior: contain;
}

.wf-table {
  min-width: 720px;
  font-size: var(--wf-text-sm);
}

.wf-table th,
.wf-table td {
  padding: var(--wf-space-3) var(--wf-space-4);
  border-bottom: 1px solid var(--wf-border);
  text-align: left;
  vertical-align: middle;
}

.wf-table th {
  background: var(--wf-gray-50);
  color: var(--wf-text-muted);
  font-weight: 700;
}

.wf-table tr:last-child td {
  border-bottom: 0;
}

.wf-table tbody tr:hover {
  background: var(--wf-gray-50);
}

.wf-table--sticky thead th {
  position: sticky;
  z-index: 2;
  top: 0;
}

.wf-table--sticky th:first-child,
.wf-table--sticky td:first-child {
  position: sticky;
  z-index: 1;
  left: 0;
  background: var(--wf-white);
  box-shadow: 1px 0 0 var(--wf-border);
}

.wf-table--sticky thead th:first-child {
  z-index: 3;
  background: var(--wf-gray-50);
}

.wf-table--sticky-actions th:last-child,
.wf-table--sticky-actions td:last-child {
  position: sticky;
  z-index: 1;
  right: 0;
  background: var(--wf-white);
  box-shadow: -1px 0 0 var(--wf-border);
}

.wf-table--sticky-actions thead th:last-child {
  z-index: 3;
  background: var(--wf-gray-50);
}

.wf-table--sticky-leading-pair th:nth-child(2),
.wf-table--sticky-leading-pair td:nth-child(2) {
  position: sticky;
  z-index: 1;
  left: 44px;
  background: var(--wf-white);
  box-shadow: 1px 0 0 var(--wf-border);
}

.wf-table--sticky-leading-pair thead th:nth-child(2) {
  z-index: 3;
  background: var(--wf-gray-50);
}

.wf-table--sticky tbody tr:hover td:first-child,
.wf-table--sticky-actions tbody tr:hover td:last-child,
.wf-table--sticky-leading-pair tbody tr:hover td:nth-child(2) {
  background: var(--wf-gray-50);
}