// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-loop-builder-child-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;

	/**
	 * Reset styles for the <input> element to ensure compatibility
	 * across themes while maintaining a clean and accessible design.
	 */
	input {
		// Default CSS for this input field.
		flex-grow: 1;
		width: 100%;
		height: auto;
		padding: 0.5rem 0.75rem;

		// Styles to reset for buttons on most themes.
		font: inherit;
		letter-spacing: inherit;
		word-spacing: inherit;
		text-transform: inherit;
		text-decoration: inherit;
		color: inherit;
		background-color: transparent;
		border: 1px solid currentColor;
		border-radius: 4px;
		outline: none;
		transition: all 0.2s ease-in-out;

		/**
		 * Ensure placeholder inherits text styles for consistency
		 * with the input field’s appearance.
		 */
		&::placeholder {
			color: inherit;
		}

		/**
		 * Focus styles to maintain consistent border and background
		 * while providing visual feedback.
		 */
		&:focus {
			border: 1px solid currentColor;
			background-color: transparent;
		}
	}

	// Dynamic styles - specificity (0,2,0) and higher.
	&[class*="wp-block"] {
		// Text Color.
		&.spectra-text-color input {
			color: var(--spectra-text-color);
		}

		// Background Color.
		&.spectra-background-color input {
			background: var(--spectra-background-color);
		}

		// Background Gradient.
		&.spectra-background-gradient input {
			background: var(--spectra-background-gradient);
		}

		// Secondary Text Color.
		&.spectra-text-color-secondary input::placeholder {
			color: var(--spectra-text-color-secondary);
		}

		// Focus Text Color.
		&.spectra-text-color-focus input:focus {
			color: var(--spectra-text-color-focus);
		}

		// Focus Background Color.
		&.spectra-background-color-focus input:focus {
			background: var(--spectra-background-color-focus);
		}

		// Focus Background Gradient.
		&.spectra-background-gradient-focus input:focus {
			background: var(--spectra-background-gradient-focus);
		}

		// Focus Secondary Text Color.
		&.spectra-text-color-focus-secondary input:focus::placeholder {
			color: var(--spectra-text-color-focus-secondary);
		}
	}
}
