/**
 * Password field styles.
 *
 * Styles for password visibility toggle, strength meter,
 * and related password field components.
 *
 * @since 2.4.0
 */

/**
 * CSS Custom Properties for password field theming.
 *
 * Uses a smart fallback cascade to automatically pick up theme colors from:
 * - Elementor: --e-global-color-primary, --e-global-color-accent
 * - Kadence Theme: --global-palette1, --global-palette2
 * - Beaver Builder: --fl-global-primary-color
 * - Block Themes (theme.json): --wp--preset--color--primary, --wp--preset--color--accent
 * - WordPress Admin: --wp-admin-theme-color
 *
 * Themes can also override directly by setting --wu-password-icon-color.
 */
:root {
	/*
	 * Internal intermediate variables to build the cascade.
	 * CSS doesn't support long fallback chains, so we build it in layers.
	 */

	/* Layer 1: WordPress core fallbacks */
	--wu-pwd-fallback-wp: var(
		--wp--preset--color--accent,
		var(
			--wp--preset--color--primary,
			var(--wp-admin-theme-color, #2271b1)
		)
	);

	/* Layer 2: Beaver Builder -> WordPress fallback */
	--wu-pwd-fallback-bb: var(--fl-global-primary-color, var(--wu-pwd-fallback-wp));

	/* Layer 3: Kadence -> Beaver Builder fallback */
	--wu-pwd-fallback-kadence: var(--global-palette1, var(--wu-pwd-fallback-bb));

	/* Layer 4: Elementor -> Kadence fallback (final cascade) */
	--wu-pwd-fallback-final: var(
		--e-global-color-accent,
		var(
			--e-global-color-primary,
			var(--wu-pwd-fallback-kadence)
		)
	);

	/*
	 * Primary icon color.
	 * Themes can override this directly, otherwise uses the cascade above.
	 */
	--wu-password-icon-color: var(--wu-pwd-fallback-final);

	--wu-password-toggle-size: 20px;
	--wu-password-strength-weak: #dc3232;
	--wu-password-strength-medium: #f0b849;
	--wu-password-strength-strong: #46b450;
}

/**
 * Password field container.
 *
 * Ensures the toggle button can be absolutely positioned.
 */
.wu-password-field-container {
	position: relative;
}

/**
 * Password input with space for toggle.
 */
.wu-password-input {
	padding-right: 40px !important;
}

/**
 * Password visibility toggle button.
 *
 * Positioned absolutely within the input container,
 * vertically centered.
 */
.wu-pwd-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	padding: 4px;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: none;
}

/**
 * Toggle button icon styling.
 *
 * Uses theme primary color with hover effect.
 */
.wu-pwd-toggle .dashicons {
	font-size: var(--wu-password-toggle-size);
	width: var(--wu-password-toggle-size);
	height: var(--wu-password-toggle-size);
	transition: color 0.2s ease;
}

.wu-pwd-toggle:hover .dashicons,
.wu-pwd-toggle:focus .dashicons {
	color: var(--wu-password-icon-color);
}

/**
 * Active state when password is visible.
 */
.wu-pwd-toggle[data-toggle="1"] .dashicons {
	color: var(--wu-password-icon-color);
}

/**
 * Password strength meter container.
 */
.wu-password-strength-wrapper {
	display: block;
	margin-top: 8px;
}

/**
 * Password strength result display.
 */
#pass-strength-result {
	display: block;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/**
 * Strength meter states.
 *
 * Override default WordPress colors for consistency.
 */
#pass-strength-result.short,
#pass-strength-result.bad {
	background-color: #fce4e4;
	color: var(--wu-password-strength-weak);
}

#pass-strength-result.good {
	background-color: #fff8e1;
	color: #d88a00;
}

#pass-strength-result.strong {
	background-color: #e8f5e9;
	color: var(--wu-password-strength-strong);
}

#pass-strength-result.mismatch {
	background-color: #fce4e4;
	color: var(--wu-password-strength-weak);
}

/**
 * Empty state for strength meter.
 */
#pass-strength-result.empty,
#pass-strength-result:empty {
	background-color: transparent;
}

/**
 * Focus visibility for accessibility.
 */
.wu-pwd-toggle:focus {
	outline: 2px solid var(--wu-password-icon-color);
	outline-offset: 2px;
	border-radius: 2px;
}

.wu-pwd-toggle:focus:not(:focus-visible) {
	outline: none;
}

.wu-pwd-toggle:focus-visible {
	outline: 2px solid var(--wu-password-icon-color);
	outline-offset: 2px;
	border-radius: 2px;
}