.ui-pane-tree,
.ui-pane-tree-split,
.ui-pane-tree-cell,
.ui-pane-tree-pane,
.ui-pane-drop {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.ui-pane-tree-row {
  flex-direction: row;
}
.ui-pane-tree-column {
  flex-direction: column;
}
.ui-pane-tree-pane,
.ui-pane-drop {
  position: relative;
  flex-direction: column;
}
.ui-pane-divider {
  flex: none;
  background: var(--border);
  touch-action: none;
}
.ui-pane-divider-row {
  width: 5px;
  cursor: col-resize;
}
.ui-pane-divider-column {
  height: 5px;
  cursor: row-resize;
}
.ui-pane-divider:hover,
.ui-pane-divider:focus-visible {
  background: var(--purple);
  outline: none;
}
/* The half of a pane a drop would take, lit while an agent is dragged over. */
.ui-pane-drop-zone {
  position: absolute;
  pointer-events: none;
  background: color-mix(in srgb, var(--purple) 25%, transparent);
  border: 2px solid var(--purple);
  z-index: 2;
}
.ui-pane-drop-left {
  inset: 0 50% 0 0;
}
.ui-pane-drop-right {
  inset: 0 0 0 50%;
}
.ui-pane-drop-top {
  inset: 0 0 50% 0;
}
.ui-pane-drop-bottom {
  inset: 50% 0 0 0;
}