// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-form-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #e5e5e5;

	// Default icon color (moved from parent block.json)
	color: #666;

	// Anchors around the SVG.
	a {
		color: inherit;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// Span elements inside this block, if any.
	span {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// SVG elements
	svg {
		width: 100%;
		height: 100%;
	}

	// Dynamic styles - specificity (0,2,0) and higher.
	&[class*="wp-block"] {

		// Variable based CSS - Icon Color.
		&.spectra-icon-color:not(.spectra-custom-svg) {
			color: var(--spectra-icon-color);
			fill: var(--spectra-icon-color, currentColor);

			svg {
				fill: var(--spectra-icon-color, currentColor);
			}
		}

		// Variable based CSS - Fields Icon Color (legacy support).
		&.spectra-fields-icon-color {
			color: var(--spectra-fields-icon-color);
			fill: var(--spectra-fields-icon-color);

			svg {
				fill: var(--spectra-fields-icon-color);
			}
		}

		// Variable based CSS - Text Color (fallback).
		&.spectra-text-color {
			color: var(--spectra-text-color);

			svg {
				fill: var(--spectra-text-color);
			}
		}

		// Variable based CSS - Icon Size.
		&.spectra-icon-size {
			width: var(--spectra-icon-size);
			height: var(--spectra-icon-size);
			font-size: var(--spectra-icon-size);
		}

		// Variable based CSS - Fields Icon Size (legacy support).
		&.spectra-fields-icon-size {
			width: var(--spectra-fields-icon-size);
			height: var(--spectra-fields-icon-size);
			font-size: var(--spectra-fields-icon-size);
		}


		// Error states for icons
		&.spectra-error-color {
			color: var(--spectra-error-color);

			svg {
				fill: var(--spectra-error-color);
			}
		}


		// Eye icon specific colors (for password toggle)
		&.spectra-eye-icon-color {
			color: var(--spectra-eye-icon-color);

			svg {
				fill: var(--spectra-eye-icon-color);
			}
		}


	}
}
