/* Black and white converter: the picture as it will be saved with the contrast slider under it on one side;
   the look, the negative 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).
   ========================================================================== */

/* The whole picture, fitted into the box whatever its shape. */
.pst-bw__view {
	--pst-bw-tall: 440px;
	display: grid;
	place-items: center;
	min-height: 240px;
	padding: 14px;
	border-radius: 20px;
	background: var(--pst-ink);
	overflow: hidden;
}

.pst-bw__frame {
	width: min(100%, calc(var(--pst-bw-tall) * var(--pst-bw-ratio, 1.5)));
	aspect-ratio: var(--pst-bw-ratio, 1.5);
}

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

/* The contrast: a slider with its number and a button that sets it back to 0. */
.pst-bw__contrast {
	display: flex;
	align-items: center;
	gap: 12px;
}

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

/* "Show original": a switch that looks pressed while the original is shown. */
.pst .pst-bw__compare[aria-pressed="true"] {
	padding: 0 12px;
	border-radius: 10px;
	background: var(--pst-ink);
	color: var(--pst-paper);
	text-decoration: none;
}

.pst .pst-bw__status {
	flex: 1 1 100%;
}

/* The looks: two large buttons, each with the picture in that look. */
.pst-bw__looks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.pst .pst-bw__look {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	height: auto;
	min-height: 0;
	padding: 8px 8px 10px;
	border-radius: 14px;
	text-align: center;
	white-space: normal;
}

.pst-bw__thumb {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	overflow: hidden;
}

/* Before a photo is there, a band of the tones stands for the look. */
.pst-bw__thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #111111, #8A8A8A 50%, #F4F4F4);
}

.pst-bw__look[data-bw-look="sepia"] .pst-bw__thumb::before {
	background: linear-gradient(90deg, #22160C, #96704C 50%, #FFF3DE);
}

.pst-bw__thumb canvas {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pst .pst-bw__look[aria-pressed="true"] .pst-bw__thumb {
	box-shadow: 0 0 0 2px var(--pst-paper);
}

.pst .pst-bw__negative {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

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

@container pst (max-width: 450px) {
	/* The slider gets the whole width under its name. */
	.pst-bw__contrast {
		flex-wrap: wrap;
		gap: 0 12px;
	}

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

	.pst-bw__view {
		--pst-bw-tall: 340px;
		min-height: 180px;
		padding: 10px;
	}
}