/** overlay SSOT */


/* Migrated from helix-app.css */
.hx-overlay {
	position: relative;
	display: block;
	width: min(420px, 100%);
	aspect-ratio: 16 / 10;
	border-radius: var(--hx-overlay-radius);
	overflow: hidden;
	isolation: isolate;
	background: var(--hx-overlay-bg);
	color: var(--hx-overlay-fg);
}
.hx-overlay__base, .hx-overlay__media {
	position: absolute;
	inset: 0;
}
.hx-overlay__media {
	display: flex;
	align-items: flex-end;
	padding: var(--hx-overlay-pad);
	background:
		linear-gradient(160deg, var(--hx-overlay-grad-start) 0%, var(--hx-overlay-grad-mid) 55%, var(--hx-overlay-grad-end) 100%);
	color: var(--hx-on-primary);
	font-size: 18px;
	font-weight: 650;
	letter-spacing: -0.01em;
}
.hx-overlay__layer {
	position: absolute;
	inset: 0;
	display: flex;
	padding: var(--hx-overlay-pad);
	pointer-events: none;
	opacity: 0;
	transition: opacity .16s ease;
}
.hx-overlay.is-open > .hx-overlay__layer,
.hx-overlay--always > .hx-overlay__layer { opacity: 1; }
.hx-overlay--hover:hover > .hx-overlay__layer,
.hx-overlay--hover:focus-within > .hx-overlay__layer,
.hx-overlay--hover-or-focus:hover > .hx-overlay__layer,
.hx-overlay--hover-or-focus:focus-within > .hx-overlay__layer,
.hx-overlay--focus:focus-within > .hx-overlay__layer { opacity: 1; }