/* <rocket-resize> — single-element resizer. The component sets the structural styles
 * (position:relative, display:flex, the host height/width on drag, the absolute handle positions,
 * cursor, touch-action) inline in JS; this sheet supplies the LOOK (handle color, the centered grip,
 * hover/drag/keyboard-focus feedback) and a pre-upgrade fallback, all overridable by the host page.
 * Loaded by `rocket_head(:resize)`. */

rocket-resize {
  /* JS sets display:flex on connect; this is the pre-upgrade fallback so the content shows (and stays
   * a normal block in document flow) for the split second before the custom element upgrades. */
  display: block;
  position: relative;
  --rocket-resize-handle: #f5f5f5;
  --rocket-resize-handle-hover: #d0d0d0;
  --rocket-resize-handle-active: #4472c4; /* matches the demos' accent */
  --rocket-resize-grip: #9aa3ad;
}

.rocket-resize-handle {
  background: var(--rocket-resize-handle);
  user-select: none;
  z-index: 1;
  /* cursor + touch-action are set inline by JS (axis-dependent); these are inert fallbacks. */
  transition: background 120ms ease;
}

.rocket-resize-handle:hover {
  background: var(--rocket-resize-handle-hover);
}

.rocket-resize-handle.is-dragging {
  background: var(--rocket-resize-handle-active);
}

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

/* A centered grip so each edge handle reads as draggable; oriented by axis (no extra DOM). The corner
 * handle (both-axes) gets a small diagonal-ish dot instead. */
.rocket-resize-handle::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--rocket-resize-grip);
  border-radius: 9999px;
  opacity: 0.55;
}
.rocket-resize-handle-v::after { width: 22px; height: 3px; } /* bottom edge → horizontal grip */
.rocket-resize-handle-h::after { width: 3px; height: 22px; } /* right edge  → vertical grip   */
.rocket-resize-handle-c::after { width: 4px; height: 4px; }  /* corner       → dot             */

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