// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-form-input-label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	transition: color 0.2s ease;

	// Required indicator styling
	.spectra-pro-form-input-label__required {
		color: #e74c3c;
		margin-left: 2px;
	}

	// Hide required indicator for login form labels
	.wp-block-spectra-pro-login & .spectra-pro-form-input-label__required {
		display: none;
	}

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

		// Parent context inheritance - inherit parent label color when no label-specific color is set
		&:not(.spectra-label-color):not(.spectra-text-color) {

			.wp-block-spectra-pro-login &,
			.wp-block-spectra-pro-register & {
				color: var(--spectra-label-color);
			}
		}

		// Variable based CSS - Label Color.
		&.spectra-label-color {
			color: var(--spectra-label-color);
		}

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

		// Hover states
		&:focus,
		&:hover {
			// Variable based CSS - Label Color on Hover.
			&.spectra-label-color-hover {
				color: var(--spectra-label-color-hover) !important;
			}

			// Variable based CSS - Text Color on Hover (fallback).
			&.spectra-text-color-hover {
				color: var(--spectra-text-color-hover) !important;
			}
		}

		// Required indicator specific styling
		.spectra-pro-form-input-label__required {
			// Use error color for required indicator if available
			&.spectra-error-color {
				color: var(--spectra-error-color);
			}
		}

		// Error state for labels
		&.spectra-error-color {
			color: var(--spectra-error-color);
		}

		&.spectra-error-color-hover:hover {
			color: var(--spectra-error-color-hover) !important;
		}
	}
}
