/* Reading progress bar (inc/progress.php). Loaded only where the bar shows. */
.abr-progress {
	position: fixed;
	left: 0;
	right: 0;
	height: var(--abr-progress-height, 4px);
	/* Under the admin bar (99999), so it never covers it. */
	z-index: 99990;
	pointer-events: none;
	background: color-mix(in srgb, var(--abr-progress-colour, var(--abr-gold)) 18%, transparent);
}
.abr-progress--top { top: 0; }
.abr-progress--bottom { bottom: 0; }
.abr-progress__bar {
	height: 100%;
	background: var(--abr-progress-colour, var(--abr-gold));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 80ms linear;
	will-change: transform;
}
[dir="rtl"] .abr-progress__bar { transform-origin: right center; }

/* Below 601px the admin bar scrolls away with the page, so the bar keeps to
   the top and slides out from under it. From 601px the admin bar stays fixed,
   and the bar sits just below it. */
@media (min-width: 601px) {
	.admin-bar .abr-progress--top { top: var(--wp-admin--admin-bar--height, 46px); }
}

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

@media print {
	.abr-progress { display: none; }
}