/**
 * Form Link Block Styles
 *
 * @since 2.0.0
 * @package Spectra Pro
 */

.wp-block-spectra-pro-form-link {
	font-size: 14px;
	align-self: normal;

	// Default link color (moved from parent block.json)
	color: #0073aa;

	&__wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__link {
		color: inherit; // Inherit from parent block
		text-decoration: none;
		font-size: inherit;
		line-height: 1.25;
		transition: all 0.15s ease-in-out;
		cursor: pointer;
		border-radius: 0.25rem;
		padding: 0.25rem 0;

		&:hover {
			opacity: 0.8;
			text-decoration: underline;
		}

		&:focus {
			outline: 2px solid #3b82f6;
			outline-offset: 2px;
		}

		&:active {
			color: #1d4ed8;
		}

		&:visited {
			color: #1d4ed8;
		}
	}

	&__text {
		display: inline-block;
	}

	// Link type variations
	&--forgot_password {
		text-align: right;

		.spectra-pro-form-link__wrapper {
			justify-content: flex-end;
		}

		.spectra-pro-form-link__link {
			color: #6b7280;

			&:hover {
				color: #374151;
			}
		}
	}

	&--register_info {
		text-align: center;
		margin: 1.5rem 0;

		.spectra-pro-form-link__wrapper {
			justify-content: center;
		}
	}

	&--login_info {
		text-align: center;

		.spectra-pro-form-link__wrapper {
			justify-content: center;
		}

		.spectra-pro-form-link__link {
			color: #3b82f6;
		}
	}

	&--custom {

		.spectra-pro-form-link__link {
			color: inherit;
		}
	}

	// Dark mode support
	@media (prefers-color-scheme: dark) {

		&__link {
			color: #60a5fa;

			&:hover {
				color: #93c5fd;
			}

			&:visited {
				color: #1d4ed8;
			}
		}

		&--forgot_password {

			.spectra-pro-form-link__link {
				color: #9ca3af;

				&:hover {
					color: #d1d5db;
				}
			}
		}
	}

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

		// Parent context inheritance - inherit parent text color when no link-specific color is set
		&:not(.spectra-link-color):not(.spectra-text-color) {

			.wp-block-spectra-pro-login &,
			.wp-block-spectra-pro-register & {

				.spectra-pro-form-link__link,
				a {
					color: var(--spectra-text-color, inherit);
				}
			}
		}

		// Variable based CSS - Link Color.
		&.spectra-link-color {

			.spectra-pro-form-link__link,
			a {
				color: var(--spectra-link-color);
			}
		}

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

			.spectra-pro-form-link__link,
			a {
				color: var(--spectra-text-color);
			}
		}

		// Hover states
		&:focus,
		&:hover {
			// Variable based CSS - Link Color on Hover.
			&.spectra-link-color-hover {

				.spectra-pro-form-link__link,
				a {
					color: var(--spectra-link-color-hover) !important;
				}
			}

			// Variable based CSS - Text Color on Hover (fallback).
			&.spectra-text-color-hover {
				color: var(--spectra-text-color-hover) !important;

				.spectra-pro-form-link__link,
				a {
					color: var(--spectra-text-color-hover) !important;
				}
			}
		}

		// Error states for links
		&.spectra-error-color {

			.spectra-pro-form-link__link,
			a {
				color: var(--spectra-error-color);
			}
		}

		&.spectra-error-color-hover:hover {

			.spectra-pro-form-link__link,
			a {
				color: var(--spectra-error-color-hover) !important;
			}
		}
	}

	// States for interactivity
	&[data-wp-context--is-submitting="true"] {
		pointer-events: none;
		opacity: 0.6;
	}
}

// Remember/Forgot Password layout styles (moved from parent blocks)
.spectra-pro-login-form__remember-forgot-wrapper {
	width: 100%;

	// Frontend-only: Apply flex layout (not in editor)
	&:not(.block-editor-block-list__block) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	// Editor-specific targeting for inner blocks container created by WordPress
	.block-editor-inner-blocks .block-editor-block-list__layout {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: 0;
	}

	// Override WordPress vertical layout with higher specificity
	.wp-block-spectra-pro-form-wrapper-is-layout-flex.is-vertical {
		flex-direction: row;
		gap: 0;
	}

	// Forgot password (form-link) alignment
	.wp-block-spectra-pro-form-link {
		text-align: right;
	}

	// Ensure proper spacing on smaller screens
	@media (max-width: 480px) {
		flex-direction: column;
		gap: 12px;

		.wp-block-spectra-pro-form-link {
			text-align: center;
		}
	}
}

// Register link styling - center the content (moved from parent blocks)
.spectra-pro-form-link__wrapper {
	text-align: center;
}

// WordPress editor specific styles
.block-editor-block-list__layout {

	.spectra-pro-form-link {
		// Editor preview styles
		border: 1px dashed #e5e7eb;
		border-radius: 0.25rem;
		padding: 0.75rem;

		&:hover {
			border-color: #3b82f6;
		}

		// Prevent link navigation in editor
		&__link {
			pointer-events: none;
		}
	}
}

// Fix for login form links
.wp-block-spectra-pro-login .wp-block-spectra-pro-form-link {
	pointer-events: auto !important;
	cursor: pointer !important;
	z-index: 10;
	position: relative;

	a,
	.spectra-pro-form-link__link {
		pointer-events: auto !important;
		cursor: pointer !important;
	}
}
