// In the editor, we have to specifically override styles for the form input wrapper block.
.editor-styles-wrapper .wp-block-spectra-pro-form-input-wrapper {
	position: relative;
	width: 100%;

	// The block editor block-list block selector for specificity.
	&.block-editor-block-list__block {
		width: 100%;

		// Highlight wrapper in editor when selected
		&.is-selected {
			outline: 1px solid #007cba;
			outline-offset: 1px;
		}

		// Variable based CSS - Text Color for icon in editor.
		&.spectra-text-color .wp-block-spectra-pro-form-input-icon {
			color: var(--spectra-text-color);
		}
	}

	// Inner wrapper should match frontend
	&__inner {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		flex-direction: column; // Label above input in editor

		// Better visual spacing in editor
		.wp-block-spectra-pro-form-input-field {
			flex: 1;
			width: 100%;
			min-width: 0; // Prevent overflow
		}

		.wp-block-spectra-pro-form-icon {
			// Prevent icon from interfering with block selection
			pointer-events: none;
		}
	}

	// Label styling with CSS variables (match frontend)
	.wp-block-spectra-pro-form-input-label {
		display: block;
		width: 100%;
		margin-bottom: 5px;
		font-size: 14px;
		line-height: 22px;
		font-weight: 400;
		transition: color 0.2s ease;
	}

	// Editor preview mode adjustments
	&.is-preview-mode {

		.wp-block-spectra-pro-form-input-field__input {
			background-color: #f8f9f9;
		}
	}
}
