// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-loop-builder-child-filter-select {
	width: 100%;
	max-width: 100%;

	/**
	 * Reset styles for the <select> element to ensure compatibility
	 * across themes while maintaining a clean and accessible design.
	 */
	select {
		width: 100%;
		max-width: 100%;
		height: auto;
		padding: 0.5rem 2.5rem 0.5rem 0.75rem;

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

		// Add dropdown arrow icon
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==);
		background-repeat: no-repeat;
		background-position: calc(100% - 0.5rem) center;
		background-size: 1.25rem;

		/**
		 * Ensure <option> elements inherit text and background styles
		 * from the select field for a seamless visual experience.
		 */
		option {
			color: inherit;
			background: inherit;
		}
	}

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

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

		// Background Color.
		&.spectra-background-color select {
			background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==) no-repeat calc(100% - 0.5rem) center / 1.25rem, var(--spectra-background-color);
		}

		// Background Gradient.
		&.spectra-background-gradient select {
			background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==) no-repeat calc(100% - 0.5rem) center / 1.25rem, var(--spectra-background-gradient);
		}


		/**
		* Hover and focus styles to enhance user interaction.
		* Provides visual feedback when the select field is hovered or focused.
		*/

		// Changes text color on hover and focus.
		&.spectra-text-color-hover select:focus-visible,
		&.spectra-text-color-hover select:hover {
			color: var(--spectra-text-color-hover);
		}

		// Changes background color on hover and focus.
		&.spectra-background-color-hover select:focus-visible,
		&.spectra-background-color-hover select:hover {
			background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==) no-repeat calc(100% - 0.5rem) center / 1.25rem, var(--spectra-background-color-hover);
		}

		// Changes gradient background on hover and focus.
		&.spectra-background-gradient-hover select:focus-visible,
		&.spectra-background-gradient-hover select:hover {
			background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==) no-repeat calc(100% - 0.5rem) center / 1.25rem, var(--spectra-background-gradient-hover);
		}
	}
}
