/* Image converter: the list of photos on one side; the format, the background, the quality and the download on
   the other. The layout of the two sides is the shared one of the photo tools (.pst-photo in assets/css/tools.css).
   ========================================================================== */

.pst-cv .pst-drop {
	flex: none;
}

.pst-cv.is-over .pst-cv__files {
	outline: 2px dashed var(--pst-ink);
	outline-offset: 6px;
	border-radius: 16px;
}

/* The photo picked in the list, as its new file: the background of a JPG shows here. */
.pst-cv__view {
	display: grid;
	place-items: center;
	min-height: 200px;
	padding: 14px;
	border-radius: 20px;
	background: var(--pst-ink);
}

.pst-cv__view img {
	display: block;
	max-width: 100%;
	max-height: 360px;
	border-radius: 6px;
	background: #FFFFFF repeating-conic-gradient(#D9DDE4 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}

.pst-cv__item {
	cursor: pointer;
}

.pst-cv__item.is-picked {
	border-color: var(--pst-ink);
	box-shadow: 0 0 0 1px var(--pst-ink);
}

/* One row per photo: a small picture, its new name with what happens to it, and two buttons. */
.pst .pst-cv__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pst-cv__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 8px;
	border: 1px solid var(--pst-line);
	border-radius: 14px;
	background: var(--pst-white);
}

.pst-cv__thumb {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: var(--pst-tint);
	overflow: hidden;
}

.pst-cv__thumb canvas {
	display: block;
	max-width: 100%;
	max-height: 100%;
	/* A see-through picture shows the usual grey squares behind it. */
	background: #FFFFFF repeating-conic-gradient(#D9DDE4 0 25%, transparent 0 50%) 0 0 / 10px 10px;
}

.pst-cv__text {
	display: grid;
	min-width: 0;
	gap: 2px;
}

.pst-cv__name {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pst-cv__line {
	color: var(--pst-muted);
	font-size: 14px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.pst-cv__item.is-error .pst-cv__line {
	color: #8A2A17;
	font-weight: 600;
}

.pst-cv__item.is-opening .pst-cv__thumb,
.pst-cv__item.is-decoder .pst-cv__thumb,
.pst-cv__item.is-converting .pst-cv__thumb {
	animation: pst-cv-wait 1.2s ease-in-out infinite;
}

@keyframes pst-cv-wait {
	50% {
		opacity: 0.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pst-cv__item .pst-cv__thumb {
		animation: none !important;
	}
}

/* The quality: a slider with its number. */
.pst-cv__quality {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pst-cv__quality output {
	flex: none;
	min-width: 2.2em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.pst-cv [hidden] {
	display: none !important;
}

@container pst (max-width: 450px) {
	.pst-cv__item {
		grid-template-columns: 52px minmax(0, 1fr) auto auto;
		gap: 8px;
	}

	.pst-cv__thumb {
		width: 52px;
		height: 52px;
	}

	.pst-cv__view {
		min-height: 160px;
		padding: 10px;
	}

	.pst-cv__view img {
		max-height: 260px;
	}

	.pst-cv__quality {
		flex-wrap: wrap;
		gap: 0 12px;
	}

	.pst-cv__quality .pst-label {
		flex: 1 1 100%;
	}
}