// overriding ast text-decoration for anchor tag.
.ast-single-post .entry-content a.wp-block-spectra-pro-form-button {
	text-decoration: none;
}

// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-form-button:where(div, button, a) {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;

	// Default button colors (moved from parent block.json)
	color: #fff;
	background-color: #0073aa;
	border-color: #0073aa;

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

	// Hide regular icons when hover icons are enabled.
	&.has-hover-icon {

		&:focus,
		&:hover {

			.spectra-button__icon {
				display: none;
			}

			.spectra-button__hover-icon {
				display: flex;
			}
		}
	}
	// Styles for the spectra button in this block.
	:where(.spectra-button__link) {
		display: flex;
		justify-content: center;
		align-items: center;
		color: inherit;
	}

	:where(.spectra-button__icon) {
		display: flex;
		align-items: center;
		font-size: inherit;
	}

	:where(.spectra-button__hover-icon) {
		display: none; // Hidden by default.
		align-items: center;
		font-size: inherit;
	}

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

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

			.wp-block-button__link,
			.spectra-button__link {
				color: var(--spectra-button-text-color);
			}
		}

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

			.wp-block-button__link,
			.spectra-button__link {
				background-color: var(--spectra-button-bg-color);
			}
		}

		// Variable based CSS - Button Border Color.
		&.spectra-button-border-color {
			border-color: var(--spectra-button-border-color);

			.wp-block-button__link,
			.spectra-button__link {
				border-color: var(--spectra-button-border-color);
			}
		}

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

			.wp-block-button__link,
			.spectra-button__link {
				color: var(--spectra-text-color);
			}
		}

		// Variable based CSS - Gap.
		&.spectra-gap {
			gap: var(--spectra-gap);
		}

		// Variable based CSS - Icon Gap override.
		&.spectra-icon-gap {
			gap: var(--spectra-icon-gap);
		}

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

			// 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: currentColor !important;
			}
		}

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

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

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

		// The focus styling for this button.
		&:focus,
		&:hover {

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

				.wp-block-button__link,
				.spectra-button__link {
					color: var(--spectra-button-text-color-hover) !important;
					text-decoration-color: var(--spectra-button-text-color-hover) !important;
				}
			}

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

				.wp-block-button__link,
				.spectra-button__link {
					background-color: var(--spectra-button-bg-color-hover) !important;
				}
			}

			// Variable based CSS - Button Border Color on Hover.
			&.spectra-button-border-color-hover {
				border-color: var(--spectra-button-border-color-hover) !important;

				.wp-block-button__link,
				.spectra-button__link {
					border-color: var(--spectra-button-border-color-hover) !important;
				}
			}

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

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

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

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

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

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

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

			// Custom SVG hover icon color support
			.spectra-button__icon.spectra-custom-svg.spectra-icon-color-hover:not(.spectra-custom-svg) {
				fill: var(--spectra-icon-color-hover) !important;
				color: var(--spectra-icon-color-hover) !important;
			}

			.spectra-button__hover-icon.spectra-custom-svg.spectra-icon-color-hover:not(.spectra-custom-svg) {
				fill: var(--spectra-icon-color-hover) !important;
				color: var(--spectra-icon-color-hover) !important;
			}

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

			.spectra-button__hover-icon.spectra-custom-svg:not(.spectra-icon-color-hover) {
				fill: none !important;
				color: currentColor !important;
			}
		}

		// Border hover support - only change color, preserve responsive width/style from WordPress core.
		&.spectra-border-hover:focus,
		&.spectra-border-hover:hover {
			border-color: var(--spectra-border-hover-color) !important;
		}

		// Shadow hover support.
		&.spectra-shadow-hover:focus,
		&.spectra-shadow-hover:hover {
			box-shadow: var(--spectra-shadow-hover) !important;
		}

		// Border hover override - reset core WordPress border styles.
		:where(&.spectra-border-hover-override) {

			&:focus,
			&:hover {
				border-color: unset !important;
			}

			&.spectra-border-hover:focus,
			&.spectra-border-hover:hover {
				border-color: var(--spectra-border-hover-color) !important;
			}
		}

		// Shadow hover override - reset core WordPress shadow styles.
		:where(&.spectra-shadow-hover-override) {

			&:focus,
			&:hover {
				box-shadow: unset !important;
			}

			&.spectra-shadow-hover:focus,
			&.spectra-shadow-hover:hover {
				box-shadow: var(--spectra-shadow-hover) !important;
			}
		}
	}
}

// Button layout styles in form context (moved from parent blocks)
// Note: Inline width style from the width attribute will override this default
.wp-block-spectra-pro-login .wp-block-spectra-pro-form-button,
.wp-block-spectra-pro-register .wp-block-spectra-pro-form-button {
	width: 100%;

	.wp-block-button__link,
	.spectra-button__link {
		justify-content: center;
	}
}

// Fix for login form buttons
.wp-block-spectra-pro-login .wp-block-spectra-pro-form-button {
	pointer-events: auto !important;
	cursor: pointer !important;
	z-index: 10;
	position: relative;

	button,
	a {
		pointer-events: auto !important;
		cursor: pointer !important;
	}
}

// Button alignment styles based on parent overallAlignment
.wp-block-spectra-pro-form-button {

	&.spectra-button--align-left {
		margin-left: 0;
		margin-right: auto;
	}

	&.spectra-button--align-center {
		margin-left: auto;
		margin-right: auto;
	}

	&.spectra-button--align-right {
		margin-left: auto;
		margin-right: 0;
	}
}
