/* =====================================================================
   Resizable Height Lists with Overflow
   Adds a draggable handle below scrollable lists (Layers, Brushes,
   Swatches, Tools, Blending, Modifiers, Code Editor, etc.) so the user
   can adjust their height. The handle is injected by js/resizableList.js
   as a sibling element directly after the list.
   ===================================================================== */

/* The scrollable list itself. Height is driven by an inline style set
   from JS; we keep overflow-y auto so content scrolls within it. */
.is-resizable-list {
	overflow-y: auto;
}

/* While the user is actively dragging, freeze interaction with the list
   contents so hover highlights / accidental clicks don't fire and cause
   UI flicker. The drag is driven by window-level listeners, so disabling
   pointer events here does not interrupt the resize. */
.is-resizable-list.is-resizing {
	pointer-events: none;
	user-select: none;
}

/* Remove bottom border radius when handle is hovered or dragged, to avoid gaps/clipping */
.is-resizable-list.is-resizing,
.is-resizable-list.is-handle-hovered {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* The drag handle. Absolutely positioned by JS flush against the bottom
   edge of the list and matched to its width, so parent layout (block,
   flex row, grid) can't push it sideways or introduce gaps. */
.resizable-list-handle {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 11px;
	cursor: ns-resize;
	background-color: transparent;
	border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
	transition: background-color 0.15s ease;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	z-index: 2;
}

.resizable-list-handle:hover {
	background-color: var(--bg-hover);
}

/* Active state while dragging (.is-active is toggled from JS so the
   prominent color persists even when the cursor leaves the bar). */
.resizable-list-handle:active,
.resizable-list-handle.is-active {
	background-color: var(--accent-primary);
}

/* The visible grip in the centre of the handle. */
.resizable-list-grip {
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--border-medium);
	transition: background-color 0.15s ease;
	pointer-events: none;
}

.resizable-list-handle:hover .resizable-list-grip {
	background-color: var(--text-secondary);
}

.resizable-list-handle:active .resizable-list-grip,
.resizable-list-handle.is-active .resizable-list-grip {
	background-color: #ffffff;
}

/* Keep the ns-resize cursor consistent across the whole screen while
   dragging, even when the pointer moves off the handle. */
body.resizable-list-resizing,
body.resizable-list-resizing * {
	cursor: ns-resize !important;
}