/* <rocket-split> — split-pane resizer. Default styling for the host flex container, the injected
 * gutters, and the drag affordance. The component sets the structural styles (display:flex,
 * flex-direction, per-pane flex-grow, gutter flex-basis/cursor/touch-action) inline in JS; this
 * sheet supplies the LOOK (gutter color, the centered grip, hover/drag/keyboard-focus feedback) and
 * a couple of safety nets, all overridable by the host page. Loaded by `rocket_head(:split)`. */

 
rocket-split {
  /* JS sets display:flex + flex-direction on connect; this is the pre-upgrade fallback so the panes
   * sit side by side even for the split second before the custom element upgrades. */
  display: flex;
  --rocket-split-gutter: #f5f5f5;
  --rocket-split-gutter-hover: #d0d0d0;
  --rocket-split-gutter-active: #4472c4; /* matches the demos' accent */
  --rocket-split-grip: #9aa3ad;
}

/* Flex children must be allowed to shrink below their content size, or a CodeMirror editor / rendered
 * preview would refuse to get narrower than its content (the flexbox min-width:auto gotcha). JS sets
 * these inline per pane too; this covers panes added after upgrade. */
rocket-split > :not(.rocket-split-gutter) {
  min-width: 0;
  min-height: 0;
}

.rocket-split-gutter {
  position: relative;
  flex: 0 0 6px;
  background: var(--rocket-split-gutter);
  /* cursor + touch-action are set inline by JS (axis-dependent); these are inert fallbacks. */
  user-select: none;
  transition: background 120ms ease;
}

.rocket-split-gutter:hover {
  background: var(--rocket-split-gutter-hover);
}

.rocket-split-gutter.is-dragging {
  background: var(--rocket-split-gutter-active);
}

.rocket-split-gutter:focus-visible {
  outline: 2px solid var(--rocket-split-gutter-active);
  outline-offset: -1px;
}

/* A centered grip so the gutter reads as a draggable handle. Drawn with a pseudo-element so it needs
 * no extra DOM; oriented by the host's flex-direction. */
.rocket-split-gutter::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--rocket-split-grip);
  border-radius: 9999px;
  opacity: 0.55;
}
/* Horizontal split (row) → vertical grip; vertical split (column) → horizontal grip. */
rocket-split[direction='vertical'] > .rocket-split-gutter::after {
  width: 22px;
  height: 3px;
}
rocket-split:not([direction='vertical']) > .rocket-split-gutter::after {
  width: 3px;
  height: 22px;
}

/* Dark theme hook: set data-theme="dark" on <rocket-split> (or let a host bind it) to flip the
 * gutter palette without touching the structural inline styles. */
rocket-split[data-theme='dark'] {
  --rocket-split-gutter: #30363d;
  --rocket-split-gutter-hover: #3d444d;
  --rocket-split-grip: #6e7681;
}