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

// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-login {
	width: 100%;
	position: relative;
	isolation: isolate; // Create a new stacking context

	// Ensure all ::before pseudo-elements inherit border-radius for overlay effects
	&::before {
		border-radius: inherit;
		pointer-events: none; // Prevent overlay from blocking clicks
	}

	// Ensure all child elements have z-index: 1
	> * {
		position: relative;
		z-index: 1;
	}

	// Default styling matching old login 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;

	// Apply overflow clip when has video background and border-radius
	&.has-video-background,
	&.has-image-background {

		&[style*="border-radius"] {
			overflow: hidden; // Fallback for older browsers
			overflow: clip;   // Modern standard for proper border-radius clipping
		}
	}

	&[style*="border-radius"] {
		overflow: hidden; // Fallback for older browsers
		overflow: clip;   // Modern standard for proper border-radius clipping
	}

	// Default flex-wrap overriding for flex layout.
	&.wp-block-spectra-container-is-layout-flex {
		flex-wrap: nowrap;
	}

	// Dynamic styles - specificity (0,2,0) and higher.
	&[class*="wp-block"] {

		// Variable based CSS - Text Color.
		&.spectra-text-color {
			color: var(--spectra-text-color);

			// Apply only to direct text elements, not form child blocks
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p {
				color: inherit;
			}
		}

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

			@include background-image();
		}

		// Video background support matching container pattern
		&.has-video-background,
		&.spectra-background-video {
			position: relative;
			overflow: clip !important;

			> .spectra-background-video__wrapper {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				pointer-events: none;
				border-radius: inherit;

				video {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: inherit;
				}
			}

			// Apply color/gradient overlay on video backgrounds using ::before
			&.spectra-background-color::before,
			&.spectra-background-gradient::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 0;
				pointer-events: none;
				border-radius: inherit;
			}

			&.spectra-background-color::before {
				background: var(--spectra-background-color);
				opacity: var(--spectra-overlay-opacity, 1);
			}

			&.spectra-background-gradient::before {
				background: var(--spectra-background-gradient);
				opacity: var(--spectra-overlay-opacity, 1);
			}

			// Ensure content stays above video and overlay
			> *:not(.spectra-background-video__wrapper) {
				position: relative;
				z-index: 1;
			}
		}

		// Variable based CSS - Simple Background Color (only when no background image).
		&.spectra-background-color:not(.spectra-background-image) {
			// Create isolation to prevent opacity from affecting children
			isolation: isolate;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: var(--spectra-background-color);
				opacity: var(--spectra-overlay-opacity, 1);
				pointer-events: none;
			}
		}

		// Variable based CSS - Simple Background Gradient (only when no background image).
		&.spectra-background-gradient:not(.spectra-background-image) {
			// Create isolation to prevent opacity from affecting children
			isolation: isolate;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: var(--spectra-background-gradient);
				opacity: var(--spectra-overlay-opacity, 1);
				pointer-events: none;
			}
		}

		// Variable based CSS - Background Color with Background Image.
		&.spectra-background-color.spectra-background-image {
			position: relative;
			// Create isolation to prevent opacity from affecting children
			isolation: isolate;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: var(--spectra-background-color);
				opacity: var(--spectra-overlay-opacity, 1);
				pointer-events: none;
				z-index: 0;
			}

			> *:not(.spectra-background-video__wrapper) {
				position: relative;
				z-index: 3;
			}
		}

		// Variable based CSS - Background Gradient with Background Image.
		&.spectra-background-gradient.spectra-background-image {
			position: relative;
			// Create isolation to prevent opacity from affecting children
			isolation: isolate;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: var(--spectra-background-gradient);
				opacity: var(--spectra-overlay-opacity, 1);
				pointer-events: none;
				z-index: 0;
			}

			> *:not(.spectra-background-video__wrapper) {
				position: relative;
				z-index: 3;
			}
		}

		// -------------------------------- //
		// The hover states for this block. //
		// -------------------------------- //

		// Variable based CSS - Simple Background Color Hover (only when no background image).
		&.spectra-background-color-hover:not(.spectra-background-image):hover::before {
			background: var(--spectra-background-color-hover);
			opacity: var(--spectra-overlay-opacity, 1);
		}

		// Variable based CSS - Simple Background Gradient Hover (only when no background image).
		&.spectra-background-gradient-hover:not(.spectra-background-image):hover::before {
			background: var(--spectra-background-gradient-hover);
			opacity: var(--spectra-overlay-opacity, 1);
		}

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

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

		// Variable based CSS - Background Color Hover with Video Background.
		&.spectra-background-color-hover.has-video-background:hover::before,
		&.spectra-background-color-hover.spectra-background-video:hover::before {
			background: var(--spectra-background-color-hover);
			opacity: var(--spectra-overlay-opacity, 1);
		}

		// Variable based CSS - Background Gradient Hover with Video Background.
		&.spectra-background-gradient-hover.has-video-background:hover::before,
		&.spectra-background-gradient-hover.spectra-background-video:hover::before {
			background: var(--spectra-background-gradient-hover);
			opacity: var(--spectra-overlay-opacity, 1);
		}
	}

	// Form alignment based on context
	&.spectra-login-form--align-center {
		margin: 0 auto;
		text-align: center;

		// Apply alignment to labels
		.wp-block-spectra-pro-form-input-label {
			text-align: center;
		}

		// Apply alignment to input fields (for placeholder text)
		.spectra-pro-form-input-field__input,
		.spectra-form-input-field__input {
			text-align: center;
		}
	}

	&.spectra-login-form--align-right {
		margin-left: auto;
		text-align: right;

		// Apply alignment to labels
		.wp-block-spectra-pro-form-input-label {
			text-align: right;
		}

		// Apply alignment to input fields (for placeholder text)
		.spectra-pro-form-input-field__input,
		.spectra-form-input-field__input {
			text-align: right;
		}
	}

	&.spectra-login-form--align-left {
		margin-right: auto;
		text-align: left;

		// Apply alignment to labels
		.wp-block-spectra-pro-form-input-label {
			text-align: left;
		}

		// Apply alignment to input fields (for placeholder text)
		.spectra-pro-form-input-field__input,
		.spectra-form-input-field__input {
			text-align: left;
		}
	}

	// Loading state
	&.spectra-login-loading {
		opacity: 0.7;
		pointer-events: none;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			margin: -10px 0 0 -10px;
			border: 2px solid var(--spectra-loading-color, #0073aa);
			border-radius: 50%;
			border-top-color: transparent;
			animation: spin 1s linear infinite;
		}
	}

	// Field validation error styling - target only input fields (matches register block)
	.spectra-pro-login-form__input-error {
		// Target actual input fields only
		.wp-block-spectra-pro-form-input-field input,
		.spectra-form-input-field__input,
		.spectra-pro-form-input-field__input {
			border-color: #dc3232 !important;
			box-shadow: 0 0 0 1px #dc3232 !important;
		}
	}

	// Field error message styling - positioned absolutely to not affect wrapper height
	// This prevents password toggle from being affected by error message appearance
	.spectra-pro-login-form__field-error-message {
		position: absolute !important;
		left: 0 !important;
		top: 100% !important; // Position below the wrapper
		width: 100% !important;
		display: block !important;
		color: #dc3232;
		font-size: 12px;
		margin-top: 4px !important;
		z-index: 1 !important;
	}

	.spectra-pro-form-input-field__error-message {
		position: absolute !important;
		left: 0 !important;
		top: 100% !important; // Position below the wrapper
		width: 100% !important;
		display: block !important;
		color: #dc3232;
		font-size: 12px;
		margin-top: 4px !important;
		z-index: 1 !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; // Allow error message to wrap to new line
		align-items: flex-start !important; // Align items to top, not center

		// Icon should only match input height, not the entire wrapper height
		.wp-block-spectra-pro-form-icon {
			// Align to top of input, don't stretch with wrapper
			align-self: flex-start !important; // Prevent stretching in flexbox
			bottom: auto !important;
			transform: none !important; // Remove vertical centering
			padding: 11px 10px !important; // Match input padding (11px)
		}
	}

	// Default flex-wrap overriding for flex layout.
	&.wp-block-spectra-pro-login-is-layout-flex {
		flex-wrap: nowrap;
	}

	// Text color of content inside container
	&.spectra-text-color {
		color: var(--spectra-text-color);
	}
}
