// 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-pagination-next-button,
.is-layout-constrained > .wp-block-spectra-pro-loop-builder-child-pagination-next-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-pagination-next-button {
	display: flex;
	align-items: center;
	text-decoration: none;
	width: auto;
	height: auto;

	// Styles for the spectra button in this block.
	.spectra-button {
		// The link styling.
		&__link {
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration: none;
		}
		// The icon styling.
		&__icon {
			display: flex;
			align-items: center;
			font-size: inherit;

			// Default fill for FontAwesome icons (not custom SVGs)
			&:not(.spectra-custom-svg) {
				fill: currentColor;
			}
		}
	}

	// 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 Gradient.
		&.spectra-background-gradient {
			background: var(--spectra-background-gradient);
		}

		// 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;
			}
		}

		// Dynamic icon fill
		.spectra-button__icon {
			// Variable based CSS - Icon Color.
			&.spectra-icon-color:not(.spectra-custom-svg) {
				fill: var(--spectra-icon-color);
			}

			// Preserve original colors for custom SVGs
			&.spectra-custom-svg:not(.spectra-icon-color) {
				fill: none !important;
				color: none !important;
			}
		}

		&:focus,
		&:hover {

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

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

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

				.spectra-button__link {
					color: var(--spectra-text-color-hover) !important;
				}
			}

			// Variable based CSS - Icon Color on Hover.
			.spectra-icon-color-hover:not(.spectra-custom-svg) {
				fill: var(--spectra-icon-color-hover, var(--spectra-text-color-hover, currentColor)) !important;
			}

			// Preserve original colors for custom SVGs on hover
			.spectra-button__icon.spectra-custom-svg:not(.spectra-icon-color-hover) {
				fill: none !important;
				color: none !important;
			}
		}
	}
}
