// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-form-input-wrapper {
	position: relative;
	gap: 0 !important;

	&__inner {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
	}

	// Label styling with CSS variables
	.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;
	}

	// Icon positioning - position relative to form-field-wrapper, not the entire wrapper
	.wp-block-spectra-pro-form-field-wrapper {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		gap: 0;

		// Icon positioned absolutely within form-field-wrapper
		.wp-block-spectra-pro-form-icon {
			position: absolute;
			bottom: auto; // Don't stretch to bottom
			min-width: 40px;
			height: calc(40px - 2px); // Fixed height matching input
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
			pointer-events: none;
			color: #757575;
			font-size: 16px;
			transition: color 0.2s ease;
			padding: 0 10px;
			box-sizing: border-box;
			transform: none !important;
		}

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

	// Ensure icon aligns with input field only, not error messages
	.wp-block-spectra-pro-form-input-field__input {
		height: 40px;
	}

	// Adjust input field when icon is present
	&:has(.wp-block-spectra-pro-form-icon) .wp-block-spectra-pro-form-input-field__input {
		padding-left: 40px;
	}

	// Dynamic styles - specificity (0,2,0) and higher.
	&[class*="wp-block"] {
		// Variable based CSS - Label Color.
		&.spectra-label-color .wp-block-spectra-pro-form-input-label {
			color: var(--spectra-label-color);
		}

		// Variable based CSS - Icon Color.
		&.spectra-icon-color .wp-block-spectra-pro-form-icon {
			color: var(--spectra-icon-color);
		}

		// Variable based CSS - Input Text Color.
		&.spectra-input-text-color .wp-block-spectra-pro-form-input-field__input,
		&.spectra-input-text-color .spectra-form-input-field__input {
			color: var(--spectra-input-text-color);
		}

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

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

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

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

		// Variable based CSS - Error Color.
		&.spectra-error-color .wp-block-spectra-pro-form-input-field__input,
		&.spectra-error-color .spectra-form-input-field__input {
			color: var(--spectra-error-color);
			border-color: var(--spectra-error-color);
		}

		// Hover states
		&:hover {
			// Variable based CSS - Label Hover Color.
			&.spectra-label-color-hover .wp-block-spectra-pro-form-input-label {
				color: var(--spectra-label-color-hover);
			}

			// Variable based CSS - Icon Hover Color.
			&.spectra-icon-color-hover .wp-block-spectra-pro-form-icon {
				color: var(--spectra-icon-color-hover);
			}

			// Variable based CSS - Input Text Hover Color.
			&.spectra-input-text-color-hover .wp-block-spectra-pro-form-input-field__input,
			&.spectra-input-text-color-hover .spectra-form-input-field__input {
				color: var(--spectra-input-text-color-hover);
			}

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

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

			// Variable based CSS - Input Field Background Hover Color.
			&.spectra-input-field-bg-color-hover .wp-block-spectra-pro-form-input-field__input,
			&.spectra-input-field-bg-color-hover .spectra-form-input-field__input {
				background-color: var(--spectra-input-field-bg-color-hover);
			}

			// Variable based CSS - Error Hover Color.
			&.spectra-error-color-hover .wp-block-spectra-pro-form-input-field__input,
			&.spectra-error-color-hover .spectra-form-input-field__input {
				color: var(--spectra-error-color-hover);
				border-color: var(--spectra-error-color-hover);
			}
		}

		// Focus states
		&:focus-within {
			// Variable based CSS - Input Border Focus Color.
			&.spectra-input-border-color-focus .wp-block-spectra-pro-form-input-field__input,
			&.spectra-input-border-color-focus .spectra-form-input-field__input {
				border-color: var(--spectra-input-border-color-focus);
				box-shadow: 0 0 0 1px var(--spectra-input-border-color-focus);
			}
		}

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

		&.spectra-input-bg-color-active .wp-block-spectra-pro-form-input-field__input:active,
		&.spectra-input-bg-color-active .spectra-form-input-field__input:active {
			background-color: var(--spectra-input-bg-color-active);
		}

		&.spectra-input-border-color-active .wp-block-spectra-pro-form-input-field__input:active,
		&.spectra-input-border-color-active .spectra-form-input-field__input:active {
			border-color: var(--spectra-input-border-color-active);
		}

		&.spectra-input-field-bg-color-active .wp-block-spectra-pro-form-input-field__input:active,
		&.spectra-input-field-bg-color-active .spectra-form-input-field__input:active {
			background-color: var(--spectra-input-field-bg-color-active);
		}
	}

	&--password {
		// More space for password toggle
		.wp-block-spectra-pro-form-input-field__input {
			padding-right: 50px;
		}
	}
}
