/* ============================================================================================================================
	rm-drag.css - moving and resizing (assets/js/ui/rm-drag.js, Step 3a, 5 Oct 2026).
	The handles: thin strips along the edges, small squares at the corners, the bottom-right one with a white grip (three short
	diagonal lines). A drag handle takes no touch
	scrolling, so a finger moves the dialog or the rectangle instead of the page.
============================================================================================================================ */

.rm-drag-handle { touch-action: none; }
.rm-dragging, .rm-dragging * { user-select: none; }

.rm-resize-handle {
	--rm-resize-grip: var(--rm-white);

	position: absolute;
	display: block;
	z-index: var(--rm-z-handle);
	font-size: 0.1px;
	touch-action: none;
}
.rm-resize-handle--n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.rm-resize-handle--s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.rm-resize-handle--e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.rm-resize-handle--w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.rm-resize-handle--se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.rm-resize-handle--sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.rm-resize-handle--nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.rm-resize-handle--ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; }

/* touch screens: handles a finger can hit (24 px strips, 28 px corners), mostly outside the edges (6 / 8 px inside), so a small
   rectangle can still be moved; the grip stays where it was */
@media (pointer: coarse) {
	.rm-resize-handle--n { height: 24px; top: -18px; }
	.rm-resize-handle--s { height: 24px; bottom: -18px; }
	.rm-resize-handle--e { width: 24px; right: -18px; }
	.rm-resize-handle--w { width: 24px; left: -18px; }
	.rm-resize-handle--se { width: 28px; height: 28px; right: -20px; bottom: -20px; }
	.rm-resize-handle--sw { width: 28px; height: 28px; left: -20px; bottom: -20px; }
	.rm-resize-handle--nw { width: 28px; height: 28px; left: -20px; top: -20px; }
	.rm-resize-handle--ne { width: 28px; height: 28px; right: -20px; top: -20px; }
}

/* the grip: three short diagonal lines in the bottom-right corner */
.rm-resize-handle--se::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, transparent 0 46%, var(--rm-resize-grip) 46% 54%, transparent 54% 64%, var(--rm-resize-grip) 64% 72%, transparent 72% 82%, var(--rm-resize-grip) 82% 90%, transparent 90%);
	opacity: 0.85;
}
@media (pointer: coarse) {
	.rm-resize-handle--se::after { inset: auto 21px 21px auto; width: 12px; height: 12px; }
}