.list {
  position: relative;
  min-height: 0;
  overflow: auto;
  outline: none;
  /* Rows are controls: a page that opts into text selection must not select them on drag / ⌘A. */
  -webkit-user-select: none;
  user-select: none;
}
.list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.list::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 5px;
  background-clip: content-box;
}
.list::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}
.list::-webkit-scrollbar-track,
.list::-webkit-scrollbar-corner {
  background: transparent;
}
.emptyWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-faint);
}
.sizer {
  position: relative;
  width: 100%;
}
/* Popup/list rows: selection inset from the edges with Popup.Selection.arc rounding. */
.row,
.section {
  position: absolute;
  top: 0;
  left: var(--list-inset, 6px);
  width: calc(100% - 2 * var(--list-inset, 6px));
  display: flex;
  align-items: center;
}
.row {
  gap: 6px;
  padding: 0 8px;
  border-radius: var(--radius-selection, 5px);
  color: var(--fg-strong);
  white-space: nowrap;
}
.row:hover {
  background: var(--bg-tree-hover, color-mix(in srgb, var(--fg-strong) 4%, transparent));
}
.active,
.active:hover {
  background: var(--bg-tree-selected);
}
/* A focusable list that lost focus shows the inactive selection, like IDEA's JList. */
.list[tabindex="0"]:not(:focus-within) .active {
  background: var(--bg-tree-selected-inactive);
}
.section {
  padding: 0 8px;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}