/**
 * Shared editor component styles: build/editor/index.css, handle
 * `noah-shop-builder-editor`, loaded into the editor iframe through
 * block.json `editorStyle`.
 */

.noah-server-preview {
	position: relative;
	min-height: 1.5em;

	&.is-loading > :not(.noah-server-preview__spinner) {
		opacity: 0.5;
	}

	&.is-loading.is-empty {
		min-height: 3rem;
	}

	.noah-server-preview__spinner {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		margin: 0;
	}

	// Links in previews are not navigable.
	a {
		pointer-events: none;
	}
}

.noah-editor-placeholder {

	&.is-empty {
		padding: 0.75rem 1rem;
		border: 1px dashed currentcolor;
		opacity: 0.6;
		font-size: 0.8125rem;
	}
}

.noah-editor-placeholder__picker {
	min-width: 280px;
	padding: 0.5rem;
}

.noah-responsive-control__devices {
	display: flex;
	gap: 0.25rem;
	margin-block-end: 0.5rem;
}

// Noah badge on Noah block icons (inserter, toolbar, sidebar card,
// list view), so users can tell which plugin a block comes from.
// register.js adds the `noah-editor-icon` class.
.block-editor-block-icon:has(.noah-editor-icon) {
	position: relative;

	&::before {
		content: "";
		position: absolute;
		inset-block-start: -5px;
		inset-inline-end: -6px;
		z-index: 1;
		width: 12px;
		height: 12px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23667eea'/%3E%3Cstop offset='1' stop-color='%23764ba2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7' cy='7' r='7' fill='url(%23g)'/%3E%3Cpath d='M4.4 10.2V3.8h1.3l3.2 4.1V3.8h1.3v6.4H8.9L5.7 6.1v4.1z' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat;
		pointer-events: none;
	}
}

// Checkout Form container: its warnings sit above the checkout blocks.
.noah-checkout-form {

	> .block-editor-warning {
		margin-block-end: 1em;
	}

	.noah-checkout-form__form:not(:has(> .block-editor-block-list__block)) {
		min-height: 4rem;
		outline: 1px dashed currentcolor;
		outline-offset: -1px;
	}
}

// Checkout Coupon / Login: show the forms WooCommerce hides until its
// link is clicked, so they can be styled.
.noah-checkout-coupon .checkout_coupon,
.noah-checkout-login .woocommerce-form-login {
	display: block !important;
}