/* Widget "3D Model". Colors are defaults; the widget's style tab overrides them. */

.pixa-model-viewer__stage {
	position: relative;
}

.pixa-model-viewer__viewer {
	display: block;
	width: 100%;
	/* 75% of the screen height, but square on narrow screens. */
	height: min(75vh, 100vw);
	background-color: transparent;
	--poster-color: transparent;
}

/* Poster: in model-viewer's poster slot, and on its own without JavaScript. */
.pixa-model-viewer__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pixa-model-viewer__noscript {
	margin: 0;
	padding: 1em;
}

/* Keyboard focus on the model (arrow keys rotate it). The focusable element
   sits in model-viewer's shadow DOM, where :focus-visible cannot be reached
   from here, so the script sets the class. */
.pixa-model-viewer__viewer.has-focus-ring {
	outline: 2px solid #2b2925;
	outline-offset: 2px;
}

/* Pause button. Two classes, so a theme's or the Elementor kit's global
   button style (e.g. `.elementor-kit-5 button`) does not take over; every
   property such a style typically sets is pinned here. */
.pixa-model-viewer .pixa-model-viewer__toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	width: auto;
	min-width: 32px;
	height: auto;
	min-height: 32px;
	margin: 0;
	padding: 6px 14px 6px 12px;
	border: 1px solid #57524a;
	border-radius: 999px;
	background-color: #fff;
	box-shadow: none;
	color: #2b2925;
	font-family: inherit;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pixa-model-viewer .pixa-model-viewer__toggle[hidden] {
	display: none;
}

.pixa-model-viewer .pixa-model-viewer__toggle:is(:hover, :focus-visible) {
	background-color: #2b2925;
	border-color: #2b2925;
	color: #fff;
}

.pixa-model-viewer .pixa-model-viewer__toggle:focus-visible {
	outline: 2px solid #2b2925;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* Symbol only: a round 32 px target, the label stays for screen readers. */
.pixa-model-viewer .pixa-model-viewer__toggle--icon-only {
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
}

.pixa-model-viewer__toggle--icon-only .pixa-model-viewer__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Pause icon: two bars. Play icon: a triangle. Drawn in the text color and
   sized in em, so it grows with the button's typography. */
.pixa-model-viewer__icon {
	position: relative;
	flex: none;
	width: 0.8em;
	height: 0.95em;
}

.pixa-model-viewer__icon::before,
.pixa-model-viewer__icon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 30%;
	height: 100%;
	background: currentColor;
}

.pixa-model-viewer__icon::before {
	left: 5%;
}

.pixa-model-viewer__icon::after {
	right: 5%;
}

.pixa-model-viewer__toggle.is-paused .pixa-model-viewer__icon::before {
	left: 10%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.475em 0 0.475em 0.75em;
	border-color: transparent transparent transparent currentColor;
	background: none;
}

.pixa-model-viewer__toggle.is-paused .pixa-model-viewer__icon::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pixa-model-viewer .pixa-model-viewer__toggle {
		transition: none;
	}
}

.pixa-model-viewer__hint {
	margin: 8px 0 0;
	color: #57524a;
	font-size: 14px;
	text-align: center;
}

/* Editor only: widget without a model. */
.pixa-model-viewer__empty {
	padding: 2em 1em;
	border: 1px dashed #a4afb7;
	color: #57524a;
	text-align: center;
}