/*
 * The interactive cabin editor diagram (see cabinEditor.js).
 */

.cabinEditorRow {
	flex-direction: column;
	align-items: center;
}

.cabinEditorHint {
	font-size: 0.8em;
	color: var(--main-disabledInput-color);
	padding: 0.2em 0;
	text-align: center;
}

/*
 * The svg wrapper: sized by width and the per-model aspect ratio the draw
 * function sets. touch-action none keeps the browser from turning seat
 * drags into page scrolls; scroll the page from outside the diagram.
 */
.cabinEditorRow .svIo_svgOutput {
	display: block;
	width: 100%;
	max-width: 24em;
	margin: 0 auto;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/*
 * A read-only diagram is a reference beside the numbers rather than
 * something to work in, so it draws at half the editor's size. Same rule
 * specificity as the wrapper above, and it comes after, so it wins.
 */
.cabinDiagramRow .svIo_svgOutput {
	width: 50%;
	max-width: 12em;
}

/* a read-only diagram that opens the seat editor when pressed */
.cabinDiagramRow-click .svIo_svgOutput {
	cursor: pointer;
}