.pace {
	pointer-events: none;
	user-select: none;

	& > .pace-progress {
		position: fixed;
		z-index: 6969;
		top: 0;
		right: 100%;
		width: 100%;
		height: 1px;
		opacity: 1;

		mix-blend-mode: difference;

		transition:
			opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.3s cubic-bezier(0.83, 0, 0.17, 1);

		background: linear-gradient(
			to right,
			#fff 0%,
			#fff8 10%,
			#fffa 60%,
			#fff 80%
		);
		background-size: 80% auto;

		animation: shine 2s linear infinite;

		@keyframes shine {
			to {
				background-position: 400% center;
			}
		}

		&::after {
			content: '';
			display: inline-block;
			width: 120px;
			height: 10px;
			background: linear-gradient(11deg, #fff0, #fff8 60%, #fff 100%);
			filter: blur(1px);
			position: absolute;
			right: 0;
			top: 0;
			border-radius: 0 5px 5px 0;
			transform: translate(2px, -5px);

			opacity: 1;

			transition: opacity 1s cubic-bezier(0.83, 0, 0.17, 1);
		}

		&[data-progress='99'] {
			&::after {
				opacity: 0;
			}
		}
	}

	&.pace-inactive {
		& > .pace-progress {
			transition:
				opacity 1s cubic-bezier(0.64, 0, 0.78, 0),
				transform 0.3s cubic-bezier(0.83, 0, 0.17, 1),
				display 0s 1s;

			opacity: 0;
		}
	}
}