/* Crop image: the frame of the chosen ratio on the stage, the ratio buttons and the sizes.
   The layout around them (.pst-photo) is shared and lives in assets/css/tools.css.
   ========================================================================== */

/* The frame: its size in pixels comes from the stage (tool.js); outside it the photo is dimmed.
   The lines divide it in thirds, a guide for placing the subject. */
.pst-cr__frame {
	position: relative;
	box-shadow: 0 0 0 100vmax rgba(15, 27, 51, 0.68);
	outline: 1.5px solid rgba(255, 255, 255, 0.9);
	outline-offset: -1px;
	background:
		linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.667% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.667% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.667% + 0.5px), transparent calc(66.667% + 0.5px)),
		linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.667% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.667% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.667% + 0.5px), transparent calc(66.667% + 0.5px));
}

/* Eight ratios: four buttons to a row. */
.pst-cr__ratios {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.pst-cr__ratio {
	justify-content: center;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

/* A size button shows the two numbers only, on one line. */
.pst-cr [data-cr-size] {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* A small drawing of the ratio inside its button. */
.pst-cr__glyph {
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	border: 1.5px solid currentColor;
	border-radius: 2px;
}

.pst-cr__ratio[aria-pressed="true"] .pst-cr__glyph {
	background: currentColor;
	box-shadow: inset 0 0 0 2px var(--pst-ink);
}

@container pst (max-width: 450px) {
	.pst-cr__ratio {
		gap: 5px;
		padding-inline: 6px;
	}

	.pst-cr__glyph {
		transform: scale(0.8);
	}
}