/* The handles of panels.mjs: a short bar in the gutter, dark while dragged. A page places the gutter itself. */
.pn-resize { position: relative; touch-action: none; }
.pn-resize::after { content: ""; position: absolute; background: rgba(14, 8, 7, 0.16); border-radius: 3px; opacity: 0.7; transition: opacity var(--t) var(--ease), background var(--t) var(--ease); }
.pn-resize:hover::after, .pn-resize.is-active::after { opacity: 1; background: var(--ink); }
.pn-resize-x { cursor: col-resize; }
.pn-resize-x::after { top: 50%; left: 3px; width: 4px; height: 48px; transform: translateY(-50%); }
.pn-resize-y { cursor: row-resize; }
.pn-resize-y::after { left: 50%; top: 3px; height: 4px; width: 48px; transform: translateX(-50%); }