// The button block should be the size of it's content when at the root level or inside a constrained type block.
.entry-content > .wp-block-spectra-pro-loop-builder-child-filter-button,
.is-layout-constrained > .wp-block-spectra-pro-loop-builder-child-filter-button {

	// But only when it's in the none, left, right or center constrained layout mode.
	&:where(:not(.alignwide):not(.alignfull)) {
		max-width: fit-content;
	}
}

// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-loop-builder-child-filter-button {
	display: flex;
	align-items: center;
	text-decoration: none;
	width: auto;
	height: auto;

	// Text align styles.
	&.has-text-align-right {
		justify-content: right;
	}

	&.has-text-align-left {
		justify-content: left;
	}

	&.has-text-align-center {
		justify-content: center;
	}

	&:not(.has-text-align-right):not(.has-text-align-left) {
		justify-content: center;
	}

	// Styles for the spectra button link in this block.
	.spectra-button__link {
		display: flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
	}

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

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

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

			&[data-is-active="true"] {
				background: var(--spectra-background-color-active);
			}
		}

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

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

			&[data-is-active="true"] {
				background: var(--spectra-background-gradient-active);
			}
		}

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

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

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

			&[data-is-active="true"] {
				color: var(--spectra-text-color-active);

				* {
					color: inherit;
				}
			}
		}

		&:focus-visible,
		&:hover {

			// Variable based CSS - Background 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 Color on Hover.
			&.spectra-background-gradient-hover {
				background: var(--spectra-background-gradient-hover);
			}
		}
	}
}
