/**
 * Berke reading / scroll progress indicator.
 *
 * Brand-only colors:
 * - Light logo blue: #4bb8dd
 * - Brand navy: #223d65
 */

.berke-scroll-progress {
	--berke-scroll-progress-value: 0;

	position: absolute;
	z-index: 100;
	inset-inline: 0;
	inset-block-end: -1px;
	height: 5px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	background: rgba(34, 61, 101, 0.1);
	transition: opacity 160ms ease;
}

.berke-scroll-progress.is-active {
	opacity: 1;
}

.berke-scroll-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		#4bb8dd 0%,
		#223d65 100%
	);
	box-shadow: 0 0 0.4rem rgba(75, 184, 221, 0.22);
	transform: scaleX(var(--berke-scroll-progress-value));
	transform-origin: right center;
	will-change: transform;
}

/* The progress bar stays out of the way while the drawer is open. */
body.berke-mobile-menu-open .berke-scroll-progress {
	opacity: 0;
}

@media (max-width: 63.999rem) {
	.berke-scroll-progress {
		height: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.berke-scroll-progress {
		transition: none;
	}
}