.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-main);
}

.data-table th,
.data-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}

.data-table th {
  background: var(--table-head-bg);
  color: var(--table-head-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table tbody tr:hover {
  background: var(--surface-hover);
}

.data-table tbody tr.is-selected {
  background: var(--surface-selected);
}