/**
 * Panel Layout - FC Component
 * 
 * Required: Include colors.css and tokens.css before this file.
 * Sizing: Use --panel-basis CSS variable on panels.
 * Collapse/expand: Animates via flex-basis transition.
 */

/* Splitter theming - override these in your project */
:root {
  --splitter-color: var(--line-strong, #444);
  --splitter-hover: var(--accent, dodgerblue);
}

panel-branch-fc {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

panel-branch-fc[column] {
  flex-direction: column;
}

panel-branch-fc:not([column]) {
  flex-direction: row;
}

/**
 * Scroll behavior:
 * - Panels clip overflow (overflow: hidden) by default
 * - Children MUST opt-in to scrolling with overflow: auto
 * - Children also need flex: 1 and min-height: 0 to scroll properly
 * 
 * Pattern for scrollable panel content:
 *   panel-leaf-fc > your-content {
 *     flex: 1;
 *     min-height: 0;
 *     overflow: auto;
 *   }
 */
panel-leaf-fc {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Utility: Add to any direct child of a panel-leaf-fc to make it scrollable */
panel-leaf-fc>.scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

panel-branch-fc>panel-branch-fc,
panel-branch-fc>panel-leaf-fc {
  flex-basis: var(--panel-basis, 0px);
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transition:
    flex-basis var(--transition-normal),
    opacity var(--transition-normal);
}

panel-branch-fc>panel-branch-fc[fixed],
panel-branch-fc>panel-leaf-fc[fixed] {
  flex-grow: 0;
  flex-shrink: 0;
}

/* Solo panel: when all siblings are collapsed, expand to fill space */
panel-branch-fc>panel-branch-fc[data-solo],
panel-branch-fc>panel-leaf-fc[data-solo] {
  flex-grow: 1 !important;
}

panel-splitter-fc {
  background: var(--splitter-color);
  display: block;
  flex: 0 0 4px;
  touch-action: none;
  z-index: 10;
}

panel-branch-fc[column]>panel-splitter-fc {
  cursor: row-resize;
  height: 4px;
  width: auto;
}

panel-branch-fc:not([column])>panel-splitter-fc {
  cursor: col-resize;
  height: auto;
  width: 4px;
}

panel-splitter-fc[data-dragging] {
  background: var(--splitter-hover);
}

panel-splitter-fc:hover,
panel-splitter-fc[data-intersection-hover] {
  background: var(--splitter-hover);
}

panel-splitter-fc[data-hidden] {
  display: none;
}

panel-branch-fc>panel-branch-fc[data-collapsed],
panel-branch-fc>panel-leaf-fc[data-collapsed],
panel-branch-fc>panel-branch-fc[data-all-collapsed] {
  min-height: 0 !important;
  min-width: 0 !important;
  flex-basis: 0px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  opacity: 0;
  overflow: hidden !important;
  pointer-events: none;
}

body.is-resizing {
  user-select: none;
}

body.is-resizing panel-branch-fc>panel-branch-fc,
body.is-resizing panel-branch-fc>panel-leaf-fc {
  transition: none;
}

body.is-resizing[data-panel-resize-axis="row"] {
  cursor: col-resize;
}

body.is-resizing[data-panel-resize-axis="column"] {
  cursor: row-resize;
}

/* Intersection hover and drag (VS Code-style corner drag) */
body[data-intersection-hover] {
  cursor: move !important;
}

/* Override splitter cursors when intersection mode is active */
body[data-intersection-hover] panel-splitter-fc,
body.is-resizing[data-panel-resize-axis="both"] panel-splitter-fc {
  cursor: inherit !important;
}

body.is-resizing[data-panel-resize-axis="both"] {
  cursor: move !important;
}

/* Toggle button states - commonly useful for panel toggle buttons */
[data-panel-toggle][data-panel-open="false"] {
  opacity: 0.5;
  border-style: dashed;
}

[data-panel-toggle][data-panel-open="false"]:hover {
  opacity: 0.8;
}