.ui-split-panels {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Open panels share the height by their ratios (flex-grow, set by the script). */
.ui-split-panels__panel {
  flex-shrink: 1;
  flex-basis: 0;
  min-height: 0;
  overflow: hidden;
}

/* A collapsed panel takes the height of what it shows. */
.ui-split-panels__panel.is-collapsed {
  flex: none;
}

/* Handle: a bar with three dots in the middle. */
.ui-split-panels__handle {
  position: relative;
  flex: none;
  height: 4px;
  background: var(--ui-split-panels-handle, #2e2e2e);
  cursor: row-resize;
  touch-action: none;
  user-select: none;
}

.ui-split-panels__handle::before {
  content: '';
  position: absolute;
  top: 1px;
  left: calc(50% - 9px);
  width: 18px;
  height: 2px;
  background: radial-gradient(circle, var(--ui-split-panels-grip, #8a8a8a) 1px, transparent 1px) 0 0 / 6px 2px repeat-x;
}

.ui-split-panels__handle:hover,
.ui-split-panels.is-dragging .ui-split-panels__handle {
  background-color: var(--ui-split-panels-handle-active, #3a3a3a);
}

.ui-split-panels.is-dragging {
  cursor: row-resize;
  user-select: none;
}