// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-form-input-wrapper {
	position: relative;
	margin-bottom: 20px;

	&__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;
	}

	// Form field wrapper styling - same as form-field-wrapper block
	.wp-block-spectra-pro-form-field-wrapper {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;

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

		// Input field padding when icon is present
		.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;
		}
	}

	// 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 {
			color: var(--spectra-input-text-color);
		}

		// Variable based CSS - Input Background Color.
		&.spectra-input-bg-color .wp-block-spectra-pro-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 {
			border-color: var(--spectra-input-border-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 {
				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 {
				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 {
				border-color: var(--spectra-input-border-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 {
				border-color: var(--spectra-input-border-color-focus);
				box-shadow: 0 0 0 1px var(--spectra-input-border-color-focus);
			}
		}
	}

	// Field type specific styles
	&--email {

		.wp-block-spectra-pro-form-icon {
			left: 14px;
		}
	}

	&--password {

		.wp-block-spectra-pro-form-icon {
			left: 14px;
		}

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

	&--username {

		.wp-block-spectra-pro-form-icon {
			left: 14px;
		}
	}

	&--first_name,
	&--last_name {

		.wp-block-spectra-pro-form-icon {
			left: 14px;
		}
	}
}

// Register-email specific block color support
.wp-block-spectra-pro-register-username {
	// 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 {
			color: var(--spectra-input-text-color);
		}

		// Variable based CSS - Input Background Color.
		&.spectra-input-bg-color .wp-block-spectra-pro-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 {
			border-color: var(--spectra-input-border-color);
		}

		// Hover states
		&:hover {

			&.spectra-label-color-hover .wp-block-spectra-pro-form-input-label {
				color: var(--spectra-label-color-hover);
			}

			&.spectra-icon-color-hover .wp-block-spectra-pro-form-icon {
				color: var(--spectra-icon-color-hover);
			}

			&.spectra-input-text-color-hover .wp-block-spectra-pro-form-input-field__input {
				color: var(--spectra-input-text-color-hover);
			}

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

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

		// Focus states
		&:focus-within {

			&.spectra-input-border-color-focus .wp-block-spectra-pro-form-input-field__input {
				border-color: var(--spectra-input-border-color-focus);
				box-shadow: 0 0 0 1px var(--spectra-input-border-color-focus);
			}
		}
	}
}
