@use '../../base/functions' as *;
@use '../../base/mixins/accessibility' as a11y;

.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 5px;
	z-index: 999;
	animation: scroll-progress linear;
	animation-timeline: scroll(root);
	background-color: var(--action);

	@include a11y.reduced-motion {
		display: none;
		animation: none;
	}
}

@keyframes scroll-progress {
	to {
		width: 100%;
	}
}