/*
 * UHC Laupen — Custom overlay scrollbar
 *
 * The native scrollbar is hidden in global.css (it took layout space,
 * which broke 100vw-based .alignfull layouts). This thin grey indicator
 * sits on top of the whole page (above the fullscreen menu, z-index
 * 10000), fades in while scrolling and fades out when scrolling stops.
 * The element itself is injected by assets/js/scrollbar.js.
 */

.uhc-scrollbar {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 14px; /* generous hit area; the visible thumb is only 4px */
	z-index: 10010;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.uhc-scrollbar.is-visible {
	opacity: 1;
}

.uhc-scrollbar__thumb {
	position: absolute;
	top: 0;
	right: 4px;
	width: 4px;
	border-radius: 2px;
	background: #7d7d7d;
	pointer-events: auto;
	cursor: grab;
}

/* While faded out the (invisible) thumb must not swallow clicks. */
.uhc-scrollbar:not(.is-visible) .uhc-scrollbar__thumb {
	pointer-events: none;
}

.uhc-scrollbar.is-dragging .uhc-scrollbar__thumb {
	cursor: grabbing;
}

@media ( prefers-reduced-motion: reduce ) {
	.uhc-scrollbar {
		transition: none;
	}
}