// default input field line height.
input.spectra-form-input-field__input {
	line-height: 1.5;
	font-size: 14px;
	height: auto;

	&:focus {
		background-color: var(--spectra-input-bg-color);
		border-style: solid;
		border-color: #e6e7e9;
		border-width: 1px;
	}
}

// Form input wrapper styles (moved from parent blocks)
.wp-block-spectra-pro-form-input-wrapper {
	width: 100%;
	display: block;

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

// Form field wrappers (icon + input) are full width
.wp-block-spectra-pro-form-field-wrapper {
	width: 100%;
	display: flex;
	align-items: flex-start; // Align to top, not center
	position: relative;
	flex-wrap: wrap; // Allow error messages to wrap below

	// Icon should be positioned relative to input height only, not including error messages
	.wp-block-spectra-pro-form-icon {
		position: absolute;
		min-width: 40px;
		height: 38px; // Fixed height matching input (40px - 2px border)
		display: inline-flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		pointer-events: none;
		box-sizing: border-box;
		padding: 0 10px;
	}

	// Input field padding when icon is present
	.wp-block-spectra-pro-form-icon + .spectra-pro-form-input-field__input,
	.wp-block-spectra-pro-form-icon + .spectra-form-input-field__input,
	.wp-block-spectra-pro-form-icon + .wp-block-spectra-pro-form-input-field__input {
		padding-left: 45px;
	}
}

// Base input field styles
.spectra-pro-form-input-field__input,
.spectra-form-input-field__input {
	position: relative;
	width: 100%;
	flex: 1; // Take full width in flex container
	border-color: #ccc;
	color: inherit;
	font-size: 14px;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 4px;
	line-height: 1.5;
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;

	&:active {
		outline: 0;
	}

	&:disabled {
		color: #757575;
		cursor: not-allowed;
	}

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

	// Error state
	&.spectra-pro-form-input-field--error {
		border-color: var(--spectra-error-color, #dc3232) !important;
		box-shadow: 0 0 0 1px var(--spectra-error-color, #dc3232) !important;
	}
}

// Password toggle button - matches input field height dynamically
// NOTE: Input has `position: relative` (line 15), making it the positioning parent for the toggle.
// This means the toggle is positioned relative to the INPUT, not the wrapper.
// Therefore `height: 100%` and `bottom: 0` will match the input's height, ignoring error messages.
.spectra-pro-form-input-field__password-toggle,
.spectra-form-input-field__toggle {
	position: absolute !important;
	width: 40px !important;
	top: 0 !important; // Align to input top
	right: 0 !important; // Align to input right
	bottom: 0 !important; // Align to input bottom (creates height: 100% of input)
	height: 100% !important; // Match input height exactly (input is the positioning parent)
	color: #959595 !important;
	text-decoration: none !important;
	background: transparent !important;
	border: none !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 0 !important;
	cursor: pointer !important;
	z-index: 999 !important;
	pointer-events: auto !important;
	opacity: 1 !important;
	visibility: visible !important;

	&:hover,
	&:focus,
	&:active {
		opacity: 1 !important;
		visibility: visible !important;
		display: flex !important;
	}

	span {
		width: unset !important;
		height: unset !important;
	}

	// Password toggle icon states - only one should be visible at a time
	.spectra-pro-password-toggle__icon {
		pointer-events: none !important;

		&--visible {
			display: inline !important;
		}

		&--hidden {
			display: none !important; // Hidden by default until toggled
		}
	}

	svg {
		pointer-events: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

// Dynamic color styles - input now has classes applied directly
// Variable based CSS - Input Text Color.
.spectra-form-input-field__input.spectra-input-text-color,
.spectra-pro-form-input-field__input.spectra-input-text-color {
	color: var(--spectra-input-text-color);
}

// Variable based CSS - Input Background Color.
.spectra-form-input-field__input.spectra-input-bg-color,
.spectra-pro-form-input-field__input.spectra-input-bg-color {
	background-color: var(--spectra-input-bg-color);
}

// Variable based CSS - Input Border Color.
.spectra-form-input-field__input.spectra-input-border-color,
.spectra-pro-form-input-field__input.spectra-input-border-color {
	border-color: var(--spectra-input-border-color);
}

// Variable based CSS - Input Placeholder Color.
.spectra-form-input-field__input.spectra-input-placeholder-color::placeholder,
.spectra-pro-form-input-field__input.spectra-input-placeholder-color::placeholder {
	color: var(--spectra-input-placeholder-color);
}

// Legacy register block support
.spectra-form-input-field__input.spectra-fields-color,
.spectra-pro-form-input-field__input.spectra-fields-color {
	color: var(--spectra-fields-color);
}

.spectra-form-input-field__input.spectra-fields-background,
.spectra-pro-form-input-field__input.spectra-fields-background {
	background-color: var(--spectra-fields-background);
}

.spectra-form-input-field__input.spectra-placeholder-color::placeholder,
.spectra-pro-form-input-field__input.spectra-placeholder-color::placeholder {
	color: var(--spectra-placeholder-color);
}

// Hover states
.spectra-form-input-field__input.spectra-input-text-color-hover:hover,
.spectra-pro-form-input-field__input.spectra-input-text-color-hover:hover {
	color: var(--spectra-input-text-color-hover) !important;
}

.spectra-form-input-field__input.spectra-input-bg-color-hover:hover,
.spectra-pro-form-input-field__input.spectra-input-bg-color-hover:hover {
	background-color: var(--spectra-input-bg-color-hover) !important;
}

.spectra-form-input-field__input.spectra-input-border-color-hover:hover,
.spectra-pro-form-input-field__input.spectra-input-border-color-hover:hover {
	border-color: var(--spectra-input-border-color-hover) !important;
}

.spectra-form-input-field__input.spectra-input-placeholder-color-hover:hover::placeholder,
.spectra-pro-form-input-field__input.spectra-input-placeholder-color-hover:hover::placeholder {
	color: var(--spectra-input-placeholder-color-hover) !important;
}

// Legacy register block hover support
.spectra-form-input-field__input.spectra-fields-background-hover:hover,
.spectra-pro-form-input-field__input.spectra-fields-background-hover:hover {
	background-color: var(--spectra-fields-background-hover) !important;
}

.spectra-form-input-field__input.spectra-placeholder-color-hover:hover::placeholder,
.spectra-pro-form-input-field__input.spectra-placeholder-color-hover:hover::placeholder {
	color: var(--spectra-placeholder-color-hover) !important;
}

// Focus states
.spectra-form-input-field__input.spectra-input-border-color-focus:focus,
.spectra-pro-form-input-field__input.spectra-input-border-color-focus:focus {
	border-color: var(--spectra-input-border-color-focus) !important;
	box-shadow: 0 0 0 1px var(--spectra-input-border-color-focus) !important;
}

// Active states
.spectra-form-input-field__input.spectra-input-text-color-active:active,
.spectra-pro-form-input-field__input.spectra-input-text-color-active:active {
	color: var(--spectra-input-text-color-active) !important;
}

.spectra-form-input-field__input.spectra-input-border-color-active:active,
.spectra-pro-form-input-field__input.spectra-input-border-color-active:active {
	border-color: var(--spectra-input-border-color-active) !important;
}

.spectra-form-input-field__input.spectra-placeholder-color-active:active::placeholder,
.spectra-pro-form-input-field__input.spectra-placeholder-color-active:active::placeholder {
	color: var(--spectra-placeholder-color-active) !important;
}

// Error state colors
.spectra-form-input-field__input.spectra-error-color,
.spectra-pro-form-input-field__input.spectra-error-color {
	color: var(--spectra-error-color);
	border-color: var(--spectra-error-color);
}

.spectra-form-input-field__input.spectra-error-color-hover:hover,
.spectra-pro-form-input-field__input.spectra-error-color-hover:hover {
	color: var(--spectra-error-color-hover) !important;
	border-color: var(--spectra-error-color-hover) !important;
}

// Password field needs right padding for toggle button
.spectra-form-input-field__input.spectra-form-input-field--password,
.spectra-pro-form-input-field__input.spectra-form-input-field--password,
.spectra-form-input-field__input.spectra-form-input-field--has-toggle,
.spectra-pro-form-input-field__input.spectra-form-input-field--has-toggle {
	padding-right: 40px !important; // Space for toggle button
}

// Specific selector for frontend password fields
.wp-block-spectra-pro-form-input-field .spectra-form-input-field__input.spectra-pro-form-input-field--password {
	padding-right: 40px !important;
}

// Frontend password field with exact class combination
.spectra-form-input-field__input.spectra-pro-form-input-field--password.wp-block-spectra-pro-form-input-field {
	padding-right: 40px !important;
}

// Error message styling (for validation errors)
.spectra-pro-form-input-field__error-message,
.spectra-pro-login-form__field-error-message {
	display: block;
	color: var(--spectra-error-color, #dc3232);
	font-size: 14px;
	margin-top: 5px;
}

// Legacy login form styles for compatibility - positioning handled by form-field-wrapper
.spectra-pro-login-form-username-wrap,
.spectra-pro-login-form-pass-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

// Fix for login form buttons and links
.wp-block-spectra-pro-login {

	.wp-block-spectra-pro-form-button,
	.wp-block-spectra-pro-form-link {
		pointer-events: auto !important;
		cursor: pointer !important;
		z-index: 10;
		position: relative;
	}

	.wp-block-spectra-pro-form-button button,
	.wp-block-spectra-pro-form-link a {
		pointer-events: auto !important;
		cursor: pointer !important;
	}
}

// Editor specific styles
.block-editor-block-list__layout,
.editor-styles-wrapper,
.wp-block-editor {

	.spectra-pro-form-input-field__password-toggle,
	.spectra-form-input-field__toggle {
		position: absolute !important;
		width: 40px !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important; // Align to input bottom (creates height: 100% of input)
		height: 100% !important; // Match input height exactly (input is the positioning parent)
		color: #959595 !important;
		text-decoration: none !important;
		background: transparent !important;
		border: none !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 0 !important;
		cursor: pointer !important;
		z-index: 999 !important;
		pointer-events: auto !important;
		opacity: 1 !important;
		visibility: visible !important;

		&:hover,
		&:focus,
		&:active {
			opacity: 1 !important;
			visibility: visible !important;
			display: flex !important;
		}

		svg {
			pointer-events: none !important;
			opacity: 1 !important;
			visibility: visible !important;
		}
	}
}
