/**
 * Progress UI for chunked ebook uploads.
 */

.ebook-upload-progress {
	margin: 10px 0 2px;
	font-size: 12px;
	line-height: 1.5;
}

.ebook-upload-progress__bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: #e2e4e7;
	overflow: hidden;
}

.ebook-upload-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: #2271b1;
	transition: width 180ms ease-out;
}

/* Movement while a slow chunk is in flight, so a stalled-looking bar still
   reads as working. */
.ebook-upload-progress:not(.is-done):not(.is-error) .ebook-upload-progress__fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0 ) 0%,
		rgba( 255, 255, 255, 0.45 ) 50%,
		rgba( 255, 255, 255, 0 ) 100%
	);
	animation: ebook-upload-sheen 1.2s linear infinite;
}

@keyframes ebook-upload-sheen {
	from {
		transform: translateX( -100% );
	}
	to {
		transform: translateX( 100% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ebook-upload-progress__fill {
		transition: none;
	}

	.ebook-upload-progress__fill::after {
		animation: none;
	}
}

.ebook-upload-progress__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 5px;
}

.ebook-upload-progress__label {
	color: #50575e;
	font-variant-numeric: tabular-nums;
}

.ebook-upload-progress__cancel {
	flex: none;
	color: #b32d2e;
	text-decoration: underline;
	cursor: pointer;
}

.ebook-upload-progress.is-done .ebook-upload-progress__fill {
	background: #00a32a;
}

.ebook-upload-progress.is-done .ebook-upload-progress__label {
	color: #00733c;
	font-weight: 600;
}

.ebook-upload-progress.is-error .ebook-upload-progress__fill {
	background: #d63638;
}

.ebook-upload-progress.is-error .ebook-upload-progress__label {
	color: #b32d2e;
	font-weight: 600;
}