/* Note that '@' rules like mixin and include have been stable and known for a long time. */

/* Disabling the no unknown '@' rules check, as all rules added here are cross-checked to be valid. */
/* stylelint-disable at-rule-no-unknown */

/*
 * Apply the background image properties.
 *
 * $image-variable The CSS var used for the image.
 */
@mixin background-image( $image-variable: var(--spectra-background-image) ) {
	background-image: $image-variable; // Overlay for gradients is handled in this.
	background-size: var(--spectra-background-size, cover);
	background-position: var(--spectra-background-position, center center);
	background-repeat: var(--spectra-background-repeat, no-repeat);
}

// Login form editor CSS to match frontend styling
.wp-block-spectra-pro-login {
	// Default gap variables for consistent spacing
	--spectra-form-field-gap: 0;
	--spectra-form-element-gap: 0;

	width: 100%;
	position: relative;
	isolation: isolate; // Create a new stacking context

	// Match frontend default styling
	padding: 30px 40px;
	transition: all 0.3s ease;
	margin: auto;
	border-style: solid;
	border-width: 1px;
	border-color: #ddd;
	border-radius: 3px;
	box-sizing: border-box;
	background: #fff;

	// Editor-specific visual aids (only when empty or selected)
	&.wp-block-spectra-pro-login__placeholder {

		&::before {
			content: "";
			position: absolute;
			border: 1px dashed #d5dadf;
			inset: 0;
			pointer-events: none;
			z-index: 0;
		}
	}

	// Ensure inner content is above any visual aids
	> * {
		position: relative;
		z-index: 1;
	}

	// Variable based CSS - Background Color when overlay is not applied.
	&.spectra-background-color:not(.spectra-background-overlay) {
		background: var(--spectra-background-color);

		// Variable based CSS - Background Image over Color.
		&.spectra-background-image {

			@include background-image();
		}
	}

	// Variable based CSS - Background Gradient when overlay is not applied.
	&.spectra-background-gradient:not(.spectra-background-overlay) {
		background: var(--spectra-background-gradient);

		// Variable based CSS - Background Image over Gradient.
		&.spectra-background-image {

			@include background-image();
		}
	}

	// Variable based CSS - Background image without any colors.
	&.spectra-background-image:not(.spectra-background-color):not(.spectra-background-gradient) {

		@include background-image();
	}

	// Variable based CSS - Background Overlay.
	&.spectra-background-overlay {
		position: relative;

		// Variable based CSS - Background Image below Overlay.
		&.spectra-background-image {

			@include background-image();
		}

		// The before pseudo-element, with either the Gradient or Color.
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: var(--spectra-background-gradient, var(--spectra-background-color));
			opacity: var(--spectra-overlay-opacity);
		}

		// All the direct children of the overlay except the background video wrapper should be relative to avoid appearing underneath it.
		& > *:not(.spectra-background-video__wrapper) {
			position: relative;
		}
	}

	&[class*="wp-block"] {

		&.has-video-background {
			z-index: 0;
			overflow: clip !important;

			> .spectra-background-video__wrapper {
				z-index: -1;
			}
		}

		&.spectra-overlay-color {

			&::before {
				content: "";
				position: absolute;
				inset: 0;
			}
		}

		// Variable based CSS - Simple Background Color Hover.
		&.spectra-background-color-hover:hover::before {
			background: var(--spectra-background-color-hover);
			opacity: var(--spectra-overlay-opacity);
		}

		// Variable based CSS - Simple Background Gradient Hover.
		&.spectra-background-gradient-hover:hover::before {
			background: var(--spectra-background-gradient-hover);
			opacity: var(--spectra-overlay-opacity);
		}
	}

	// -------------------------------- //
	// The hover states for background. //
	// -------------------------------- //

	// Variable based CSS - Background Color Hover when overlay is not applied.
	&.spectra-background-color-hover:hover:not(.spectra-background-overlay) {

		// Variable based CSS - Background Image over Color Hover.
		&.spectra-background-image {

			@include background-image( var(--spectra-background-image-hover) );
		}
	}

	// Variable based CSS - Background Gradient Hover when overlay is not applied.
	&.spectra-background-gradient-hover:hover:not(.spectra-background-overlay) {

		// Variable based CSS - Background Image over Gradient Hover.
		&.spectra-background-image {

			@include background-image( var(--spectra-background-image-hover) );
		}
	}

	// Variable based CSS - Background Overlay.
	&.spectra-background-overlay:hover {
		position: relative;

		// Variable based CSS - Background Image below Overlay.
		&.spectra-background-image {

			@include background-image( var(--spectra-background-image-hover) );
		}

		// The before pseudo-element, with either the Gradient or Color.
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: var(--spectra-background-gradient-hover, var(--spectra-background-color-hover, var(--spectra-background-gradient, var(--spectra-background-color))));
			opacity: var(--spectra-overlay-opacity);
		}
	}

}

// Prevent HeyLogin or other modals from affecting block selection
.editor-styles-wrapper {
	// Isolate the login block from external modal overlays
	.wp-block-spectra-pro-login {
		// Prevent event bubbling from external modals
		&:focus-within {
			isolation: isolate;
		}
	}

	// Override any global modal/overlay styles that might affect selection
	.block-editor-block-list__layout {

		.wp-block-spectra-pro-login {
			// Ensure proper click handling
			pointer-events: auto !important;

			// Prevent selection issues when modals close
			&.is-selected::after {
				pointer-events: none;
			}
		}
	}
}

.wp-block-spectra-pro-login__footer {

	.wp-block-spectra-pro-login-info {
		text-align: center;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		margin: 0;
	}
}

// // Additional editor-specific styles for child components
// .wp-block-spectra-pro-login {

// 	// Style form messages in editor
// 	.wp-block-spectra-pro-form-message {
// 		border-radius: 4px;
// 		color: #666;
// 		font-size: 0.9rem;
// 	}

// 	// Style reCAPTCHA placeholder in editor
// 	.wp-block-spectra-pro-form-recaptcha {
// 		border-radius: 4px;
// 		text-align: center;
// 		color: #666;
// 		background-color: #f9f9f9;

// 		&::before {
// 			content: "reCAPTCHA will appear here";
// 			font-size: 0.9rem;
// 		}
// 	}

// 	// Field error message styling in editor (matching frontend)
// 	.spectra-pro-login-form__field-error-message {
// 		display: block !important;
// 		color: #dc3232;
// 		font-size: 12px;
// 		margin-top: 4px !important;
// 		width: 100% !important;
// 		// Force to new line in flexbox
// 		flex-basis: 100% !important;
// 		order: 999 !important;
// 	}

// 	.spectra-pro-form-input-field__error-message {
// 		display: block !important;
// 		color: #dc3232;
// 		font-size: 12px;
// 		margin-top: 4px !important;
// 		width: 100% !important;
// 		// Force to new line in flexbox
// 		flex-basis: 100% !important;
// 		order: 999 !important;
// 	}

// 	// Form field wrapper must allow wrapping when error message is inside
// 	.wp-block-spectra-pro-form-field-wrapper,
// 	.spectra-pro-form-field-wrapper {
// 		flex-wrap: wrap !important;
// 		align-items: flex-start !important;
// 	}
// }
