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

// In the editor, input now receives blockProps directly (no wrapper!)
.spectra-form-input-field__input {
	width: 100%;
	position: relative;
	pointer-events: auto; // Allow interaction in editor for better UX
	cursor: text;
	font-family: inherit;
	font-size: 14px;
	padding: 11px 15px;
	border: 1px solid #ddd;
	border-radius: 4px;

	// Editor-specific disabled state
	&:disabled {
		opacity: 0.7;
	}

	// Variable based CSS - Input Text Color in editor.
	&.spectra-input-text-color {
		color: var(--spectra-input-text-color) !important;
	}

	// Variable based CSS - Input Background Color in editor.
	&.spectra-input-bg-color {
		background-color: var(--spectra-input-bg-color) !important;
	}

	// Variable based CSS - Input Border Color in editor.
	&.spectra-input-border-color {
		border-color: var(--spectra-input-border-color);
	}

	// Variable based CSS - Input Placeholder Color in editor.
	&.spectra-input-placeholder-color::placeholder {
		color: var(--spectra-input-placeholder-color);
	}

	// Hover states in editor
	&.spectra-input-text-color-hover:hover {
		color: var(--spectra-input-text-color-hover) !important;
	}

	&.spectra-input-bg-color-hover:hover {
		background-color: var(--spectra-input-bg-color-hover) !important;
	}

	&.spectra-input-border-color-hover:hover {
		border-color: var(--spectra-input-border-color-hover) !important;
	}

	// Focus states in editor
	&.spectra-input-text-color-active:focus {
		color: var(--spectra-input-text-color-active) !important;
	}

	&.spectra-input-bg-color-active:focus {
		background-color: var(--spectra-input-bg-color-active) !important;
	}

	&.spectra-input-border-color-focus:focus {
		border-color: var(--spectra-input-border-color-focus) !important;
	}

	// Password field input needs extra right padding for toggle button
	&.spectra-form-input-field--password {
		padding-right: 50px; // Space for password toggle
	}
}

// Password toggle button styles for editor - positioned relative to INPUT
// Input has `position: relative`, so toggle is positioned within it, not the wrapper
.spectra-pro-form-input-field__password-toggle {
	position: absolute;
	right: 0; // Align to input right
	top: 0; // Align to input top
	bottom: 0 !important; // Align to input bottom (creates height: 100% of input)
	height: 100% !important; // Match input height exactly, ignoring error messages
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	pointer-events: auto; // Allow interaction in editor
	z-index: 3;

	svg {
		color: #959595;
	}
}
