/* ==========================================================================
 * Shared design part-preview modal (#1256) — wpc-designer-integration module.
 *
 * Styles for the trigger button and the dialog body frame emitted by
 * LJE_Part_Preview::render(). The dialog shell itself is the shared
 * .lje-modal component (lje-tools/includes/utilities/modal/).
 *
 * The trigger reset uses :where() so it carries zero specificity: the cart's
 * text triggers also carry Woo's `.button` class and must keep that skin.
 * ========================================================================== */

/* One viewport position on every surface. The shell centers the dialog
 * vertically (inset 0 + margin auto), so its top edge is a function of the
 * body's height — and the body differs per surface, which is why the same
 * dialog opened lower on the account tiles than on the cart. Top-anchoring
 * takes height out of the equation; the override is scoped to this dialog so
 * every other .lje-modal keeps the shell's centering. see #1261 */
.lje-modal.lje-part-preview {
	top: var(--lj-space-7, 3rem);
	right: 0;
	bottom: auto;
	left: 0;
	margin: 0 auto;
	max-height: calc(100vh - var(--lj-space-7, 3rem) * 2);
	transform: none;
}

/* Gated on [open] so the shell's `.lje-modal:not([open]) { display: none }`
 * keeps the closed state; this only lets the body scroll inside the capped
 * height instead of spilling past it. see #1261 */
.lje-modal.lje-part-preview[open] {
	display: flex;
	flex-direction: column;
}

.lje-modal.lje-part-preview .lje-modal__body {
	max-height: none;
	min-height: 0;
}

:where(.lje-part-preview__trigger) {
	-webkit-appearance: none; /* Safari < 15.4, see #1217 */
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.lje-part-preview__trigger > img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* The proof-approval strip: full modal width, flush under the header's divider.
 * The body is padded, so the strip cancels that padding with equal negative
 * margins — landing it exactly on the body's padding-box edges, which is where
 * `overflow` clips, so nothing is cut off. The selector outranks the shell's
 * `.lje-modal__body :first-child { margin-top: 0 }`. see #1261 */
.lje-modal.lje-part-preview .lje-modal__body .lje-part-preview__intro {
	margin: calc(var(--lj-space-5, 1.5rem) * -1) calc(var(--lj-space-5, 1.5rem) * -1)
		var(--lj-space-5, 1.5rem);
	padding: var(--lj-space-3, 0.75rem) var(--lj-space-5, 1.5rem);
	background: var(--lj-color-navy, #4c6085);
	color: var(--lj-color-text-inverse, #fff);
	text-align: center;
}

.lje-part-preview__frame {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.lje-part-preview__frame img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}