/*
 * SplitContainer handles.
 *
 * Drawn between flex children. The hit-target is the full handle
 * width; the visible bar is a thinner stripe centred inside so the
 * drag feels forgiving without dominating the layout.
 */

.split-container {
  /* flex direction is set inline by SplitContainer.js so the rest
     of the layout system can keep using grid where it wants. */
}

.split-handle {
  position: relative;
  background: transparent;
  z-index: 5;
  touch-action: none;
  user-select: none;
}

.split-handle::before {
  content: "";
  position: absolute;
  background: rgba(111, 227, 163, 0.08);
  border-radius: 1px;
  transition: background 0.15s ease;
}

.split-handle:hover::before,
body.split-dragging .split-handle::before {
  background: rgba(111, 227, 163, 0.45);
}

.split-handle-vert {
  cursor: col-resize;
}

.split-handle-vert::before {
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.split-handle-horiz {
  cursor: row-resize;
}

.split-handle-horiz::before {
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

body.split-dragging,
body.split-dragging * {
  user-select: none;
}