/**
 * Split Pane Styles
 * @countermeasure/web-components
 *
 * Resizable split layout with horizontal/vertical orientation.
 */

/* ============================================================================
   SPLIT CONTAINER
   ============================================================================ */
.cmm-split {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cmm-split--horizontal {
  flex-direction: row;
}

.cmm-split--vertical {
  flex-direction: column;
}

/* ============================================================================
   SPLIT PANE
   ============================================================================ */
.cmm-split__pane {
  overflow: auto;
  min-width: 0;
  min-height: 0;
}

.cmm-split__pane--collapsed {
  flex: 0 0 0 !important;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* ============================================================================
   GUTTER (RESIZER)
   ============================================================================ */
.cmm-split__gutter {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in oklab, var(--color-border) 80%, transparent);
  transition: background-color var(--transition-fast, 150ms);
  user-select: none;
  touch-action: none;
}

/* Keyboard focus ring (gutter is a focusable role="separator") */
.cmm-split__gutter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 50%, transparent);
}

/* Horizontal gutter (vertical divider line) */
.cmm-split--horizontal > .cmm-split__gutter {
  width: 6px;
  cursor: col-resize;
}

/* Vertical gutter (horizontal divider line) */
.cmm-split--vertical > .cmm-split__gutter {
  height: 6px;
  cursor: row-resize;
}

/* Hover state — matches React twin `hover:bg-primary/40` */
.cmm-split__gutter:hover {
  background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
}

/* Active / dragging state */
.cmm-split__gutter--active,
.cmm-split__gutter:active {
  background-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
}

/* Gutter handle indicator (dots/lines) */
.cmm-split__gutter-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.cmm-split--horizontal > .cmm-split__gutter > .cmm-split__gutter-handle {
  width: 2px;
  height: 24px;
  background-color: color-mix(in oklab, var(--color-muted-foreground) 55%, transparent);
}

.cmm-split--vertical > .cmm-split__gutter > .cmm-split__gutter-handle {
  width: 24px;
  height: 2px;
  background-color: color-mix(in oklab, var(--color-muted-foreground) 55%, transparent);
}

.cmm-split__gutter:hover > .cmm-split__gutter-handle {
  background-color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
}

/* ============================================================================
   DRAGGING STATE (applied to body during resize)
   ============================================================================ */
.cmm-split--dragging {
  cursor: col-resize;
  user-select: none;
}

.cmm-split--dragging.cmm-split--vertical {
  cursor: row-resize;
}

.cmm-split--dragging .cmm-split__pane {
  pointer-events: none;
}

/* ============================================================================
   COLLAPSE TOGGLE
   ============================================================================ */
.cmm-split__collapse-toggle {
  box-sizing: border-box;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-card);
  color: var(--color-muted-foreground);
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--transition-fast, 150ms),
              background-color var(--transition-fast, 150ms),
              color var(--transition-fast, 150ms);
}

.cmm-split__gutter:hover .cmm-split__collapse-toggle,
.cmm-split__collapse-toggle:focus-visible {
  opacity: 1;
}

.cmm-split__collapse-toggle:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

.cmm-split__collapse-toggle svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .cmm-split--responsive {
    flex-direction: column;
  }

  .cmm-split--responsive > .cmm-split__gutter {
    width: 100%;
    height: 6px;
    cursor: row-resize;
  }

  .cmm-split--responsive > .cmm-split__gutter > .cmm-split__gutter-handle {
    width: 24px;
    height: 2px;
  }
}
