/* Flip image: the picture as it will be saved on one side, the buttons that flip and turn it,
   the original next to the result 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-flip__view {
	display: grid;
	place-items: center;
	min-height: 240px;
	padding: 14px;
	border-radius: 20px;
	background: var(--pst-ink);
	overflow: hidden;
}

.pst-flip__view canvas {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 440px;
	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 two flips: large buttons with a drawing of what they do. */
.pst-flip__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.pst .pst-flip__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 84px;
	padding: 10px 8px;
	text-align: center;
}

.pst-flip__btn svg {
	flex: none;
}

.pst-flip__btn:active svg {
	transform: scale(0.94);
}

/* Quarter turns and the way back: smaller, in one row. */
.pst-flip__turns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.pst-flip__turns .pst-textbtn {
	margin-left: auto;
}

.pst .pst-flip__state {
	min-height: 1.55em;
}

/* The original and the result side by side. */
.pst-flip__pairing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	/* The two pictures stand on one line whatever their shapes, so their captions line up. */
	align-items: end;
	gap: 10px;
	color: var(--pst-muted);
}

.pst-flip__pairing > .pst-icon {
	align-self: center;
}

.pst .pst-flip__thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
}

.pst-flip__thumb canvas {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 96px;
	border: 1px solid var(--pst-line);
	border-radius: 8px;
	background: #FFFFFF repeating-conic-gradient(#D9DDE4 0 25%, transparent 0 50%) 0 0 / 10px 10px;
}

.pst-flip__blank {
	display: block;
	width: 100%;
	max-width: 120px;
	aspect-ratio: 3 / 2;
	border: 1px dashed var(--pst-line-strong);
	border-radius: 8px;
}

.pst-flip__thumb canvas:not([hidden]) + .pst-flip__blank {
	display: none;
}

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

@container pst (max-width: 450px) {
	.pst-flip__view {
		min-height: 180px;
		padding: 10px;
	}

	.pst-flip__view canvas {
		max-height: 340px;
	}

	.pst .pst-flip__btn {
		min-height: 76px;
	}

	/* In a narrow column the line about the state often takes two lines: room for both, so nothing below it moves. */
	.pst .pst-flip__state {
		min-height: 3.1em;
	}
}