/* ⚠ In a virtualized table the library puts EVERY CELL in its own absolutely positioned band of
   one row step, and `role="row"` stays a ZERO-height container (measured: band 32px, row 1px).
   Hence rules are drawn by the CELL, the cell fills the band, and hover and selection paint through
   a descendant selector. The header group is zero-height for the same reason and the library
   already wraps it in a sticky box — so its ground is painted by the header CELLS, or rows scroll
   straight through the column titles. */

.frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* Both axes on the scroll container the virtualizer measures: when the columns together need more
   than the panel gives, the table scrolls sideways instead of squeezing text out of existence. */
.table {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  outline: none;
}

/* With nothing to show the table is its head alone. The height is spelled out because an empty
   collection makes the library reserve the whole viewport for an empty state of its own (702px). */
.frameEmpty .table {
  height: var(--row-height-table);
  flex: none;
}

/* A column header has to read as a header, not as one more line of data. */
.column {
  display: flex;
  contain: layout paint style;
  overflow: hidden;
  height: 100%;
  align-items: center;
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--color-separator);
  background-color: var(--color-chrome);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: inherit;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  outline: none;
}

.row {
  cursor: default;
  outline: none;
}

.cell {
  display: flex;
  contain: layout paint style;
  overflow: hidden;
  height: 100%;
  align-items: center;
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--color-separator);
  white-space: nowrap;
  text-overflow: ellipsis;
  outline: none;
}

/* The column rule is the SAME line that divides rows: lines that mean the same are drawn the
   same. On the cell, so it spans the band edge to edge and joins the one below. */
.divided {
  border-left: 1px solid var(--color-separator);
}

.row[data-hovered] .cell {
  background-color: var(--color-raised);
}

.row[data-selected] .cell {
  background-color: var(--color-selected);
}

.row[data-focus-visible] .cell {
  border-block-color: var(--color-accent);
}

.empty {
  padding: var(--space-5) var(--space-4);
  color: var(--color-text-secondary);
}