/**
 * Form Field Wrapper Block Editor Styles
 * Ensures editor matches frontend icon positioning - V1 style
 */

.editor-styles-wrapper .wp-block-spectra-pro-form-field-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;

	.block-editor-block-list__block {
		// Editor specific styling
		position: relative;
		width: 100%;
	}

	.block-editor-inner-blocks {
		width: 100%;
	}

	// V1-style icon positioning - match frontend exactly
	.wp-block-spectra-pro-form-icon {
		position: absolute !important;
		left: 1px !important;
		top: 1px !important;
		bottom: 1px !important;
		min-width: 40px !important;
		height: calc(100% - 2px) !important;
		z-index: 2 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
		pointer-events: none !important;

		// Icon size support
		&.spectra-icon-size {
			width: var(--spectra-icon-size) !important;
			height: var(--spectra-icon-size) !important;
			font-size: var(--spectra-icon-size) !important;
		}

		svg {
			fill: currentColor !important;
		}
	}

	// Input field is now direct child (no wrapper)
	.spectra-form-input-field__input,
	.spectra-pro-form-input-field__input {
		flex: 1;
		width: 100%;
	}

	// Add left padding when icon is present as sibling
	.wp-block-spectra-pro-form-icon + .spectra-form-input-field__input,
	.wp-block-spectra-pro-form-icon + .spectra-pro-form-input-field__input {
		padding-left: 45px !important;
	}

	// Password field adjustments
	&--password,
	&[data-field-type="password"],
	&[data-field-type="confirm_password"] {
		align-items: flex-start !important; // Don't vertically center - keep input at top

		.spectra-form-input-field__input,
		.spectra-pro-form-input-field__input {
			padding-right: 50px !important;
			position: relative !important; // Create positioning context for toggle
		}

		// Password toggle positioned relative to INPUT, not wrapper
		// This way error messages in wrapper don't affect toggle height
		.spectra-pro-form-input-field__password-toggle {
			position: absolute !important;
			right: 0 !important;
			top: 0 !important;
			bottom: 0 !important; // Align to input bottom (creates height: 100% of input)
			height: 100% !important; // Match input height exactly, ignoring error messages
			width: 40px !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			background: transparent !important;
			border: none !important;
			cursor: pointer !important;
			z-index: 3 !important;
			pointer-events: auto !important;

			// SVG sizing for password toggle is handled by form-input-field block styles
			// Only set color here for editor preview
			svg {
				color: #959595 !important;
			}
		}
	}

	// Preview styling
	&[data-is-preview="true"] {
		padding: 1rem;
		border: 1px dashed #ccc;
		text-align: center;
		color: #666;
	}
}
