@use 'variables' as *;

.modula-takeover__live-preview-empty-state {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: $mod-space-6 0;
	box-sizing: border-box;
}

.modula-takeover__live-preview-empty-state--message {
	flex-direction: column;
	gap: $mod-space-4;
	text-align: center;
	max-width: 28rem;
	margin-inline: auto;
}

.modula-takeover__live-preview-empty-state__message {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--mod-se-preview-ink, #{$mod-takeover-text-strong});
}

.modula-takeover__live-preview-empty-state__hint {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.75;
	color: var(--mod-se-preview-ink-muted, #{$mod-takeover-text-muted});
}

// "Add images" (canvas "1 · Editor"): a small solid button 16px under the
// message. The artboard is outside the admin-ui scope, so the canvas values
// are written out; on a light device frame the colours swap.
.modula-takeover__live-preview-empty-state__action {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: 32px;
	margin: 12px 0 0;
	padding: 0 14px;
	border: none;
	border-radius: 0;
	background: #1f1f1c;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	cursor: pointer;

	&:focus-visible {
		outline: 2px solid currentcolor;
		outline-offset: 2px;
	}
}

// The desktop artboard has no paper: the message sits on the dark stage.
// Tablet and mobile keep their light device frame.
.modula-takeover__preview-wrap:not(.modula-takeover__preview-wrap--tablet):not(.modula-takeover__preview-wrap--mobile) {

	.modula-takeover__live-preview-empty-state__message {
		color: var(--modula-takeover-stage-ink, #{$mod-takeover-stage-ink});
	}

	.modula-takeover__live-preview-empty-state__hint {
		color: var(--modula-takeover-stage-ink-muted, #{$mod-takeover-stage-ink-muted});
	}

	.modula-takeover__live-preview-empty-state__action {
		background: #fff;
		color: #1f1f1c;

		&:focus-visible {
			outline-color: #fff;
		}
	}
}