/* Rotate image: the picture as it will be saved, with a grid and the fine turn under it, on one side;
   the quarter turns, the angle, the corners 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-rt__view {
	--pst-rt-tall: 440px;
	display: grid;
	place-items: center;
	min-height: 240px;
	padding: 14px;
	border-radius: 20px;
	background: var(--pst-ink);
	overflow: hidden;
}

.pst-rt__frame {
	position: relative;
	width: min(100%, calc(var(--pst-rt-tall) * var(--pst-rt-ratio, 1.5)));
	aspect-ratio: var(--pst-rt-ratio, 1.5);
}

.pst-rt__frame canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	/* See-through corners show the usual grey squares behind them. */
	background: #FFFFFF repeating-conic-gradient(#D9DDE4 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}

/* Over the picture: the grid, and the place where a level line is drawn. */
.pst-rt__layer {
	position: absolute;
	inset: 0;
	border-radius: 4px;
	pointer-events: none;
}

.pst-rt__layer.is-grid {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: calc(100% / 6) calc(100% / 4);
	box-shadow: inset 0 0 0 1px rgba(15, 27, 51, 0.25);
}

/* While a level line is drawn, a finger on the picture draws: it does not scroll the page. */
.pst-rt__layer.is-level {
	pointer-events: auto;
	cursor: crosshair;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.pst-rt__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pst-rt__line line {
	stroke: #FFB224;
	stroke-width: 3;
	stroke-linecap: round;
	filter: drop-shadow(0 0 1px rgba(15, 27, 51, 0.9));
}

/* The fine turn: a slider with its value. */
.pst-rt__fine {
	display: flex;
	align-items: center;
	gap: 12px;
}

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

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

/* "Draw a level line": a switch that looks pressed while lines are drawn. */
.pst .pst-rt__level[aria-pressed="true"] {
	padding: 0 12px;
	border-radius: 10px;
	background: var(--pst-ink);
	color: var(--pst-paper);
	text-decoration: none;
}

/* The quarter turns and the angle in one row. */
.pst-rt__turns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.pst-rt__turns .pst-chip {
	min-height: 44px;
	font-variant-numeric: tabular-nums;
}

.pst-rt__angle {
	max-width: 180px;
}

.pst .pst-rt__corners[hidden] {
	display: none;
}

.pst .pst-rt__corners .pst-chip[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

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

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

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

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