/**
 * PSDM Designer Pan styling — make the stage clip scrollable + the hand tool.
 *
 * The designer ships the stage clip container as overflow:hidden (so a zoomed
 * canvas is clipped with no way to reach it). We flip it to overflow:auto with
 * thin, subtle scrollbars; psdm-designer-pan.js adds the SPACE / Hand-tool drag.
 *
 * @package PSDM
 */

/* The stage clip box — scroll instead of clip. !important beats the designer's
   own overflow:hidden stylesheet rule. The canvas, rulers and dimension badges
   share this scroll space, so they pan together and stay aligned. */
.nbd-stages .stage[id^="stage-container-"] {
	overflow: auto !important;
	overscroll-behavior: contain;
}

/* Thin, unobtrusive scrollbars (WebKit/Blink). */
.nbd-stages .stage[id^="stage-container-"]::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.nbd-stages .stage[id^="stage-container-"]::-webkit-scrollbar-thumb {
	background: rgba(23, 25, 34, 0.22);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.nbd-stages .stage[id^="stage-container-"]::-webkit-scrollbar-thumb:hover {
	background: rgba(23, 25, 34, 0.4);
	background-clip: content-box;
}
.nbd-stages .stage[id^="stage-container-"]::-webkit-scrollbar-corner {
	background: transparent;
}
/* Firefox */
.nbd-stages .stage[id^="stage-container-"] {
	scrollbar-width: thin;
	scrollbar-color: rgba(23, 25, 34, 0.28) transparent;
}

/* ---- hand-tool cursors ---- */

/* When the hand tool is armed (Hand toggle on, or SPACE held), the whole stage
   reads as grab; while dragging, grabbing. The upper-canvas needs the override
   too — Fabric sets its own inline cursor on it. */
body.psdm-pan-active .nbd-stages .stage[id^="stage-container-"],
body.psdm-pan-active .nbd-stages .stage[id^="stage-container-"] canvas {
	cursor: grab !important;
}
body.psdm-pan-grabbing,
body.psdm-pan-grabbing .nbd-stages .stage[id^="stage-container-"],
body.psdm-pan-grabbing .nbd-stages .stage[id^="stage-container-"] canvas {
	cursor: grabbing !important;
}

/* ---- "Hand" toggle — injected top-bar menu item (mirrors the Guides pill) ---- */

.nbd-main-bar .menu-item.psdm-pan-toggle {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
	margin: 0 4px;
	padding: 10px 18px !important;
	border: 0;
	border-radius: var(--ax-r-pill, 999px);
	line-height: 1;
	cursor: pointer;
	color: var(--ax-gray-900, #171922);
	background: transparent;
	font-family: var(--ax-font, inherit);
	opacity: 1 !important;
	transition: background var(--ax-t-fast, 0.15s) ease;
}

.nbd-main-bar .menu-item.psdm-pan-toggle span {
	color: inherit !important;
	opacity: 1 !important;
	font-weight: 700;
	font-size: var(--ax-text, 14px);
}

.nbd-main-bar .menu-item.psdm-pan-toggle:hover {
	background: var(--ax-accent-100, #eef1ff);
}

/* ON = hand tool armed -> soft lavender active pill (matches the Guides toggle). */
.nbd-main-bar .menu-item.psdm-pan-toggle.psdm-pan-on {
	background: var(--ax-cta-tint-strong, linear-gradient(135deg, #e3e8ff 0%, #ece2ff 100%));
}

.nbd-main-bar .menu-item.psdm-pan-toggle .psdm-pan-ic-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.nbd-main-bar .menu-item.psdm-pan-toggle .psdm-pan-ic {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.nbd-main-bar .menu-item.psdm-pan-toggle .psdm-pan-ic path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@supports ((-webkit-mask: none) or (mask: none)) {
	.nbd-main-bar .menu-item.psdm-pan-toggle .psdm-pan-ic-wrap {
		--psdm-pan-icon-mask: url("../images/psdm-hand-tool.png");
	}

	.nbd-main-bar .menu-item.psdm-pan-toggle .psdm-pan-ic {
		display: none;
	}

	.nbd-main-bar .menu-item.psdm-pan-toggle .psdm-pan-ic-wrap::before {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		background: currentColor;
		opacity: 0.92;
		-webkit-mask: var(--psdm-pan-icon-mask) center / 20px 20px no-repeat;
		mask: var(--psdm-pan-icon-mask) center / 20px 20px no-repeat;
	}
}