.tree {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
.tree-row {
  display: flex;
  align-items: center;
  gap: var(--sp-050);
  min-height: var(--h-row);
  padding: 0 var(--sp-050) 0 calc(var(--sp-050) + var(--sp-200) * var(--depth, 0));
  border-radius: var(--r-xs);
  font-size: var(--fs-s);
  color: var(--ink);
  cursor: default;
  user-select: none;
}
.tree-row:hover { box-shadow: inset 0 0 0 var(--bw) var(--acc); }
.tree-row.chosen { background: var(--acc-weak); color: var(--acc-ink); }
.tree-row.under-chosen { background: color-mix(in srgb, var(--acc-weak) 45%, transparent); }
.tree-row:is(.chosen, .under-chosen):has(+ .tree-row.under-chosen),
.tree-row.chosen:has(+ .tree-row.chosen) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tree-row:is(.chosen, .under-chosen) + .tree-row.under-chosen,
.tree-row.chosen + .tree-row.chosen { border-top-left-radius: 0; border-top-right-radius: 0; }
.tree-row.dim > :not(.tree-eye) { opacity: .45; }
.tree-row.doubt:not(.chosen) { color: var(--warn-ink); }
.tree-doubt { flex: none; display: inline-grid; place-items: center; width: var(--h-btn-sm); }
.tree-row.atom:not(.chosen):not(.doubt) .tree-name { color: var(--atom-ink); }
.tree-atom { flex: none; display: inline-grid; place-items: center; width: var(--h-btn-sm); color: var(--atom-ink); }
.tree-fold, .tree-kind, .tree-eye {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  padding: 0;
  border: none;
  border-radius: var(--r-xs);
  background: none;
  color: inherit;
}
button.tree-fold:hover, button.tree-kind:hover, .tree-eye:hover { background: var(--acc-weak); }
.tree-fold, .tree-kind { color: var(--ink3); }
.tree-row.chosen :is(.tree-fold, .tree-kind) { color: inherit; }
.tree-fold { width: var(--sp-200); }
.tree-fold .ic { transition: transform var(--dur-pop) var(--ease-out); }
.tree-fold.open .ic { transform: rotate(90deg); }
.tree-name { flex: 1 1 auto; min-width: 0; }
.tree-row.object .tree-kind { color: var(--ink2); }
.tree-count {
  flex: none;
  display: inline-block;
  box-sizing: border-box;
  min-width: calc(var(--sp-200) + var(--sp-025));
  height: calc(var(--sp-200) + var(--sp-025));
  padding: 0 var(--sp-050);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink3);
  font-size: var(--fs-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.tree-row.chosen .tree-count { background: color-mix(in srgb, var(--acc-ink) 12%, transparent); color: inherit; }
.tree-swatch {
  flex: none;
  width: var(--sp-150);
  height: var(--sp-150);
  border-radius: var(--r-full);
}
.tree-eye { opacity: 0; }
.tree-row:hover .tree-eye, .tree-row.dim .tree-eye, .tree-eye:focus-visible { opacity: 1; }
.tree-edit { flex: 1 1 auto; min-width: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input).tree-edit {
  height: calc(var(--lh-s) + var(--sp-050));
  min-height: 0;
  margin: 0 calc(var(--sp-050) * -1);
  padding: 0 var(--sp-050);
  border: var(--bw) solid var(--acc);
  border-radius: var(--r-xs);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}
.tree-row.drop-into { background: var(--acc-weak); color: var(--acc-ink); }