*:has(> .data-grid) {
  overflow-y: hidden;
  overflow-x: scroll;
  width: 100%;
}

.data-grid {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 2rem;
  overflow: hidden;
  table-layout: auto;
  text-align: left;
  width: auto;
}

.data-grid :is(th, td) {
  border-bottom: 2px solid #eee;
  padding: var(--space-3xs);
  font-size: 1em;
  width: fit-content;
}

.data-grid td {
  border-bottom-width: 1px;
}

.data-grid td:has(input:focus) {
  background-color: #eee;
}

.data-grid td input {
  background: none;
}

.data-grid td input:focus {
  outline: none;
}

.data-grid input {
  border: none;
  width: var(--width, 250px);
  max-width: auto;
}