// This animation will be shown when user change the pages in the product collection block
.wc-block-product-collection__pagination-animation {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100vw;
	max-width: 100vw;
	height: 4px;
	background-color: var(--wp--preset--color--primary, #000);
	opacity: 0; // Hide the animation by default.
	transform-origin: 0% 0%; // Start the animation from the left.
	pointer-events: none; // Allows click events to pass through to elements underneath.

	&.start-animation {
		animation: wc-block-product-collection__pagination-start-animation 30s cubic-bezier(0.03, 0.5, 0, 1) forwards;
	}

	&.finish-animation {
		animation: wc-block-product-collection__pagination-finish-animation	300ms ease-in;
	}
}

@keyframes wc-block-product-collection__pagination-start-animation {
	0% {
		transform: scaleX(0);
		opacity: 1;
	}
	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}

@keyframes wc-block-product-collection__pagination-finish-animation {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}