/* Reusable ruler tools: centimetre/millimetre rulers, dragging affordances, ticks, labels. */

.measurement-ruler {
	--ruler-x: 0px;
	--ruler-y: 0px;
	position: absolute;
	left: 0;
	bottom: 8px;
	width: calc((var(--cm-size) * 10) + (var(--ruler-end-buffer) * 2));
	height: var(--ruler-height);
	box-sizing: border-box;
	border: var(--ruler-border-width) solid #151515;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 18px 34px rgba(60, 66, 87, 0.16);
	cursor: default;
	user-select: none;
	touch-action: none;
	transform: translate(var(--ruler-x), var(--ruler-y));
}

.measurement-ruler[data-measurement-ruler],
.measurement-mm-ruler[data-measurement-ruler] {
	cursor: grab;
}

.measurement-ruler.is-dragging,
.measurement-mm-ruler.is-dragging {
	cursor: grabbing;
	box-shadow: 0 24px 44px rgba(60, 66, 87, 0.2);
}

.measurement-ruler-ticks,
.measurement-ruler-labels {
	position: absolute;
	inset: 0;
}

.measurement-ruler-tick {
	position: absolute;
	left: calc(var(--ruler-end-buffer) + (var(--tick-index) * var(--cm-size)));
	top: 0;
	width: 3px;
	height: 72px;
	background: #151515;
	transform: translateX(-50%);
}

.measurement-ruler-tick.is-half-cm {
	width: 2px;
	height: 52px;
	opacity: 0.82;
}

.measurement-ruler-labels span {
	position: absolute;
	left: calc(var(--ruler-end-buffer) + (var(--label-index) * var(--cm-size)));
	top: 76px;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: #151515;
}

.measurement-ruler-unit {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: #151515;
}

.measurement-mm-ruler {
	--ruler-x: 0px;
	--ruler-y: 0px;
	position: absolute;
	left: 0;
	bottom: 8px;
	width: calc((var(--mm-size) * var(--ruler-mm)) + (var(--mm-ruler-end-buffer) * 2));
	height: var(--mm-ruler-height);
	box-sizing: border-box;
	border: var(--mm-ruler-border-width) solid #151515;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 18px 34px rgba(60, 66, 87, 0.16);
	user-select: none;
	touch-action: none;
	transform: translate(var(--ruler-x), var(--ruler-y));
}

.measurement-mm-ruler-corner-move {
	position: absolute;
	right: 12px;
	bottom: 10px;
	width: clamp(14px, 1.8vw, 22px);
	height: auto;
	pointer-events: none;
	opacity: 0.78;
	transform: translateX(0);
	z-index: 2;
}

.measurement-ruler.is-move-hint-active .measurement-mm-ruler-corner-move,
.measurement-mm-ruler.is-move-hint-active .measurement-mm-ruler-corner-move {
	animation: rulerCornerMoveNudge 15s ease-in-out infinite;
}

.measurement-ruler-move-hint {
	position: absolute;
	right: -38px;
	bottom: -58px;
	width: clamp(42px, 6vw, 72px);
	height: auto;
	pointer-events: none;
	opacity: 0;
	transform: translateX(16px) rotate(-30deg) scale(0.96);
	z-index: 3;
}

.measurement-ruler.is-move-hint-active .measurement-ruler-move-hint,
.measurement-mm-ruler.is-move-hint-active .measurement-ruler-move-hint {
	animation: rulerMoveHintPulse 15s ease-in-out infinite;
}

.measurement-ruler.is-dragging .measurement-mm-ruler-corner-move,
.measurement-ruler.is-dragging .measurement-ruler-move-hint,
.measurement-mm-ruler.is-dragging .measurement-mm-ruler-corner-move,
.measurement-mm-ruler.is-dragging .measurement-ruler-move-hint {
	opacity: 0;
	animation: none;
}

@keyframes rulerCornerMoveNudge {
	0%,
	2%,
	16%,
	100% {
		transform: translateX(0);
	}

	8% {
		transform: translateX(-16px);
	}
}

@keyframes rulerMoveHintPulse {
	0%,
	2%,
	16%,
	100% {
		opacity: 0;
		transform: translateX(16px) rotate(-30deg) scale(0.96);
	}

	4%,
	12% {
		opacity: 0.72;
	}

	8% {
		opacity: 0.9;
		transform: translateX(0) rotate(-30deg) scale(1);
	}
}

.measurement-mm-ruler-ticks,
.measurement-mm-ruler-labels {
	position: absolute;
	inset: 0;
}

.measurement-mm-ruler-tick {
	position: absolute;
	left: calc(var(--mm-ruler-end-buffer) + (var(--tick-index) * var(--mm-size)));
	top: 0;
	background: #151515;
	transform: translateX(-50%);
}

.measurement-mm-ruler-tick.is-1mm {
	width: 1px;
	height: 34px;
	opacity: 0.72;
}

.measurement-mm-ruler-tick.is-5mm {
	width: 2px;
	height: 52px;
	opacity: 0.86;
}

.measurement-mm-ruler-tick.is-10mm {
	width: 3px;
	height: 72px;
}

.measurement-mm-ruler-labels span {
	position: absolute;
	left: calc(var(--mm-ruler-end-buffer) + (var(--label-index) * var(--mm-size)));
	top: 76px;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: #151515;
}

.measurement-mm-ruler-labels span.is-mid-mm-label {
	top: 54px;
	font-size: 12px;
	font-weight: 750;
}

.measurement-mm-ruler-unit {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	color: #151515;
}

body.dark .measurement-ruler {
	border-color: #fff4db;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

body.dark .measurement-ruler-tick {
	background: #fff4db;
}

body.dark .measurement-ruler-labels span {
	color: #fff4db;
}

body.dark .measurement-ruler-unit {
	color: #fff4db;
}

body.dark .measurement-mm-ruler {
	border-color: #fff4db;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

body.dark .measurement-mm-ruler-tick {
	background: #fff4db;
}

body.dark .measurement-mm-ruler-labels span,
body.dark .measurement-mm-ruler-unit {
	color: #fff4db;
}