/* hcg-split-pane base styles */

.hcg-split-pane {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  touch-action: none;
}

.hcg-split-pane-horizontal {
  flex-direction: row;
}

.hcg-split-pane-vertical {
  flex-direction: column;
}

.hcg-split-pane_pane {
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  overflow: auto;
  min-width: 0;
  min-height: 0;
}

.hcg-split-pane_gutter {
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--hcg-split-gutter-bg, rgba(99, 102, 241, 0.18));
  user-select: none;
  touch-action: none;
  transition: background 0.15s ease;
}

.hcg-split-pane_gutter::after {
  content: '';
  pointer-events: none;
  flex-shrink: 0;
  color: var(--hcg-split-gutter-grip, rgba(71, 85, 105, 0.55));
}

/* Vertical gutter (side-by-side panes): three stacked dots */
.hcg-split-pane-horizontal .hcg-split-pane_gutter::after {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 -6px 0 currentColor,
    0 6px 0 currentColor;
}

/* Horizontal gutter (stacked panes): three centered dots */
.hcg-split-pane-vertical .hcg-split-pane_gutter::after {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    -6px 0 0 currentColor,
    6px 0 0 currentColor;
}

.hcg-split-pane_gutter:hover {
  background: var(--hcg-split-gutter-hover, rgba(99, 102, 241, 0.35));
}

.hcg-split-pane_gutter:hover::after {
  color: var(--hcg-split-gutter-grip-hover, rgba(71, 85, 105, 0.75));
}

.hcg-split-pane_gutter.hcg-split-pane_gutter-active,
.hcg-split-pane_gutter.hcg-split-pane_gutter-active:hover {
  background: var(--hcg-split-gutter-active, rgba(67, 56, 202, 0.92));
}

.hcg-split-pane-horizontal .hcg-split-pane_gutter {
  cursor: col-resize;
}

.hcg-split-pane-vertical .hcg-split-pane_gutter {
  cursor: row-resize;
}

.hcg-split-pane-disabled .hcg-split-pane_gutter {
  cursor: default;
  pointer-events: none;
  opacity: 0.45;
}

body.hcg-split-pane-dragging,
body.hcg-split-pane-dragging * {
  cursor: col-resize !important;
}

body.hcg-split-pane-dragging .hcg-split-pane-vertical,
body.hcg-split-pane-dragging .hcg-split-pane-vertical * {
  cursor: row-resize !important;
}