/* 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);
}

// Register form editor CSS to match frontend styling and color flow
.wp-block-spectra-pro-register {
	// Default gap variables for consistent spacing
	--spectra-form-field-gap: 0;
	--spectra-form-button-gap: 0;
	--spectra-form-element-gap: 0;

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

	// Default styling matching frontend register block
	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;


	// 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);
		}
	}

	// Ensure content stays above overlay
	> * {
		position: relative;
		z-index: 1;
	}


	// Ensure all form input wrappers are full width in editor
	.wp-block-spectra-pro-register-user-name,
	.wp-block-spectra-pro-register-first-name,
	.wp-block-spectra-pro-register-last-name,
	.wp-block-spectra-pro-register-email,
	.wp-block-spectra-pro-register-password {
		width: 100%;
		display: block;

		// Inner wrapper should also be full width
		&__inner {
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		// Last input wrapper doesn't need bottom margin
		&:last-child {
			margin-bottom: 0;
		}
	}

	// Register-specific blocks alignment
	.wp-block-spectra-pro-register-username,
	.wp-block-spectra-pro-register-email,
	.wp-block-spectra-pro-register-first-name,
	.wp-block-spectra-pro-register-last-name,
	.wp-block-spectra-pro-register-password,
	.wp-block-spectra-pro-register-confirm-password {
		width: 100%;

		&:last-child {
			margin-bottom: 0;
		}
	}

	// Make sure input fields take full width in editor
	.wp-block-spectra-pro-form-input-field {
		width: 100%;
		flex: 1;

		&__input {
			width: 100%;
			box-sizing: border-box;
			padding: 12px 16px; // Default comfortable padding for better UI
			border: 1px solid #ddd;
			border-radius: 4px;
			font-size: 14px;
			line-height: 1.4;

			&::placeholder {
				color: #757575;
				opacity: 1;
			}
		}
	}

	// Button should be full width to match inputs in editor
	.wp-block-spectra-pro-form-button {
		width: 100%;

		.wp-block-button__link {
			width: 100%;
			justify-content: center;
		}
	}

	// Style form links in editor
	.wp-block-spectra-pro-form-link {
		display: block;
		text-align: center;
	}

	// Style form messages in editor matching v1 styles
	.wp-block-spectra-pro-form-message {
		padding: 8px 12px;
		border-radius: 4px;
		font-size: 0.9rem;

		// Success message styling (v1 compatible)
		&[data-message-type="success"] {
			background: #f0f8f0;
			color: #46b450;

			&:empty::before {
				content: "Registration successful! Please check your email to verify your account.";
			}
		}

		// Error message styling (v1 compatible)
		&[data-message-type="error"] {
			background: #fef7f7;
			color: #dc3232;

			&:empty::before {
				content: "An error occurred. Please try again.";
			}

			strong {
				font-weight: 600;
			}
		}
	}

	// Style reCAPTCHA placeholder in editor
	.wp-block-spectra-pro-form-recaptcha {
		// margin: var(--spectra-form-element-gap) 0;
		padding: 1rem;
		border: 2px dashed #d5dadf;
		border-radius: 4px;
		text-align: center;
		color: #666;
		background-color: #f9f9f9;

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

// Email template button styling
.spectra-register-email-button {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	&:focus {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
		outline: 3px solid transparent !important;
	}
}

// Email template modal styling
.spectra-pro-register-email-modal {
	padding: 0 !important;

	.components-modal__content {
		padding: 0 !important;
	}

	.components-modal__header {
		padding: 14px 25px 14px 25px !important;
		border-bottom: 0 !important;
		margin: 0 !important;
		border-radius: 2px 2px 0 0 !important;
		box-shadow: 0 6px 8px -3px rgb(0 0 0 / 5%), 0 4px 6px -2px rgb(0 0 0 / 5%) !important;
	}

	&__content {
		padding: 14px 25px 14px 25px !important;

		.components-notice.is-warning {
			max-width: 550px;
			margin-left: 0;
			margin-bottom: 25px;
		}

		.components-base-control {
			margin-bottom: 25px;

			&.spectra-email-message-body {
				margin-bottom: 0;

				.components-base-control {
					margin-bottom: 0;
				}
			}

			.components-textarea-control__input,
			.components-text-control__input {
				color: #50575e;
				border-color: #e6e7e9;
				border-radius: 3px;
				padding: 7px 12px;
				font-size: 14px;
				line-height: 22px;
			}

			.components-select-control__input {
				color: #50575e !important;
				border-color: #e6e7e9 !important;

				&:active {

					& ~ .components-input-control__backdrop {
						border-color: #e6e7e9 !important;
					}
				}
			}

			&__help {
				margin-left: 165px;
			}

			&__field {
				display: flex;
				justify-content: space-between;

				label.components-base-control__label {
					width: 200px;
				}

				.components-textarea-control__input {
					min-height: 200px;
				}

				.components-select-control {
					flex-direction: row;

					div[data-wp-component="FlexItem"] {
						width: 252px;
					}
				}
			}
		}
	}

	&__footer {
		position: sticky;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14px 25px 14px 25px;
		border-radius: 0 0 2px 2px;
		background: #fff;
		bottom: 0;
		box-shadow: 0 -6px 8px -3px rgb(0 0 0 / 5%), 0 -4px 6px -2px rgb(0 0 0 / 5%);

		&-notice {
			font-size: 14px;
		}

		i.dashicons {
			font-size: 22px;
			color: #1f2937;
			margin-right: 10px;
		}
	}
}

// Notice styling for register block
.wp-block-spectra-pro-register .components-notice {
	margin-bottom: 20px;
	pointer-events: auto !important;

	.components-notice__content {
		line-height: 1.8;
		pointer-events: auto !important;

		// Ensure links in notice are clickable with proper cursor
		a {
			cursor: pointer !important;
			pointer-events: auto !important;
			color: #0073aa !important;
			text-decoration: underline !important;
			position: relative !important;
			z-index: 999 !important;

			&:hover {
				color: #005a87 !important;
				text-decoration: underline !important;
			}

			&:focus {
				color: #005a87 !important;
				outline: 2px solid #0073aa !important;
				outline-offset: 2px !important;
			}
		}
	}
}

// Block appender default styles
.block-list-appender.wp-block {

	button {
		color: #a0a7ac;
		font-size: 62px;
		border: none;
		box-shadow: none;

		svg {
			width: 36px;
			height: 36px;
		}
	}

	// Notice styling from V1 for consistency
	.components-notice,
	.spectra-pro-register-disabled-notice {
		margin-bottom: 20px;

		.components-notice__content {
			line-height: 1.8;

			a {
				color: #0073aa;
				text-decoration: underline;

				&:hover {
					color: #005a87;
				}
			}
		}
	}
}

// // Additional editor-specific styles for child components - matching login block
// .wp-block-spectra-pro-register {
// 	// Register-specific child blocks spacing in editor
// 	.wp-block-spectra-pro-register-username,
// 	.wp-block-spectra-pro-register-email,
// 	.wp-block-spectra-pro-register-first-name,
// 	.wp-block-spectra-pro-register-last-name,
// 	.wp-block-spectra-pro-register-password,
// 	.wp-block-spectra-pro-register-confirm-password,
// 	.wp-block-spectra-pro-register-terms-and-conditions {

// 		&:last-child {
// 			margin-bottom: 0;
// 		}
// 	}

// 	// General form child blocks spacing in editor
// 	.wp-block-spectra-pro-form-input-field,
// 	.wp-block-spectra-pro-form-checkbox,
// 	.wp-block-spectra-pro-form-message {

// 		&:last-child {
// 			margin-bottom: 0;
// 		}
// 	}

// 	// Fix: Remove margin-bottom from input fields inside form-field-wrapper
// 	// The wrapper should handle spacing, not the individual fields
// 	.wp-block-spectra-pro-form-field-wrapper .wp-block-spectra-pro-form-input-field {
// 		margin-bottom: 0;
// 	}

// 	// Field error and success message styling in editor
// 	// These messages appear INSIDE form-field-wrapper, so force them to wrap to next line
// 	.spectra-pro-register-form__field-error-message,
// 	.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;
// 	}

// 	// Field success message styling (password strength indicator) in editor
// 	.spectra-pro-register-form__field-success-message {
// 		display: block !important;
// 		font-size: 14px;
// 		margin-top: 5px !important;
// 		width: 100% !important;
// 		// Force to new line in flexbox
// 		flex-basis: 100% !important;
// 		order: 999 !important;
// 	}

// 	// Form field wrapper must allow wrapping when messages are inside
// 	.wp-block-spectra-pro-form-field-wrapper {
// 		flex-wrap: wrap !important; // Allow messages to wrap to new line
// 		align-items: flex-start !important; // Align items to top

// 		// Icon should only match input height, not the entire wrapper height
// 		.wp-block-spectra-pro-form-icon {
// 			align-self: flex-start !important;
// 			top: 2px !important;
// 			bottom: auto !important;
// 			transform: none !important;
// 			padding: 11px 10px !important;
// 		}
// 	}

// 	// Style form input wrappers in editor - ensure consistent spacing
// 	.wp-block-spectra-pro-register-user-name,
// 	.wp-block-spectra-pro-register-first-name,
// 	.wp-block-spectra-pro-register-last-name,
// 	.wp-block-spectra-pro-register-email,
// 	.wp-block-spectra-pro-register-password {

// 		&:last-child {
// 			margin-bottom: 0;
// 		}
// 	}

// 	// Style form wrapper blocks in editor
// 	.wp-block-spectra-pro-form-wrapper {

// 		&:last-child {
// 			margin-bottom: 0;
// 		}
// 	}

// 	// Style form links in editor - ensure consistent spacing
// 	.wp-block-spectra-pro-form-link {
// 		display: block;

// 		&:last-child {
// 			margin-bottom: 0;
// 		}
// 	}
// }
