/* The wrapper is needed only for the events caught on it (double click, pointer down for the
   preload, Enter — which pins the tab) and therefore sets no sizes beyond what the panel has
   already given. */
.frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* The tree itself is the scroll container: the virtualizer needs a height of its own, and the panel
   gives it everything the header has left over. */
.tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  outline: none;
}

/* A transparent border instead of a margin, plus background-clip: the background is painted over
   the border-box and paints a transparent border in too, so at a row step of 26 the fill comes out
   24, as in the measurement. */
.item {
  display: flex;
  gap: var(--space-2);
  align-items: center;

  /* The row fills the virtualizer's band: otherwise its fill is shorter than the band, the row
     sticks to the top edge and leaves an unpainted gap below — the same defect the table cells
     had, found there by measurement and generalized here. */
  height: 100%;
  border-block: var(--row-fill-inset) solid transparent;
  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  background-clip: padding-box;
  cursor: pointer;
}

/* The level indent goes off the library's count: data-level comes from the tree, we do not measure
   nesting by hand. */
.item[data-level='2'] {
  padding-left: var(--space-6);
}

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

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

.item[data-focus-visible] {
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
}

/* The chevron and the stub in its place are of one width: rows without children do not slide
   left. */
.chevron {
  display: flex;
  width: var(--space-6);
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* The title takes all the free width, so the right edge of the row (state, counter, progress) is
   pressed to the panel's edge, and it is exactly the title that is truncated first. */
.title {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}