.block-editor-block-list__block .wp-block-spectra-pro-loop-builder-child-filter {

	.is-hidden {
		display: none;
	}

	.filter-button-preview {
		display: block;
	}

	// Styles for the filter button preview.
	.filter-button-preview-wrapper {

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

			// When there's a text color, everything inside should inherit.
			* {
				color: inherit;
			}
		}

		// Variable based CSS - Background Color on Hover.
		&.spectra-background-color-hover {

			.filter-button-preview {
				background: var(--spectra-background-color-hover);
			}
		}

		// Variable based CSS - Background Gradient on Hover.
		&.spectra-background-gradient-hover {

			.filter-button-preview {
				background: var(--spectra-background-gradient-hover);
			}
		}
	}

	// Styles for the active filter button.
	.wp-block-spectra-pro-loop-builder-child-filter-button {

		// Variable based CSS - Text Color Active.
		&.spectra-text-color-active {

			&.editor-active {
				color: var(--spectra-text-color-active);

				* {
					color: inherit;
				}
			}
		}

		// Variable based CSS - Background Color Active.
		&.spectra-background-color-active {

			&.editor-active {
				background: var(--spectra-background-color-active);
			}
		}

		// Variable based CSS - Background Gradient Active.
		&.spectra-background-gradient-active {

			&.editor-active {
				background: var(--spectra-background-gradient-active);
			}
		}

		// Variable based CSS on Hover.
		&:hover {

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

				// When there's a text color, everything inside should inherit.
				* {
					color: inherit;
				}
			}

			// Variable based CSS - Background Color on Hover.
			&.spectra-background-color-hover {
				background: var(--spectra-background-color-hover);
			}

			// Variable based CSS - Background Gradient on Hover.
			&.spectra-background-gradient-hover {
				background: var(--spectra-background-gradient-hover);
			}
		}
	}
}
