// Defaults for the button block.
$default-text-icon-gap: 10px;

.wp-block-spectra-pro-form-button:where(div, button) {

	// 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;
	}
	// Default CSS for this block.
	display: flex;
	align-items: center;
	width: auto;
	height: auto;
	gap: var(--spectra-icon-gap, $default-text-icon-gap);

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

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

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

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

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

	// Styles for the spectra button in this block.
	.spectra-button {
		// The icon styling.
		&__icon {
			display: flex;
			align-items: center;
			font-size: inherit;
			fill: currentColor;
			// Variable based CSS - Icon Color.
			&.spectra-icon-color {
				fill: var(--spectra-icon-color);
			}
		}
	}

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

		&:focus,
		&:hover {

			.spectra-button__icon {
				display: none;
			}

			.spectra-button__hover-icon {
				display: flex;
			}
		}
	}

	// The focus styling for this button.
	&:focus,
	&:hover {
		// Variable based CSS - Icon Color on Focus and Hover.
		.spectra-button__icon {
			fill: var(--spectra-text-color-hover, currentColor) !important;
		}

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

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

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

			.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 {
			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 {
			fill: var(--spectra-icon-color-hover, var(--spectra-text-color-hover, currentColor));
		}
	}

	// Hover icon styling - behave like regular icons
	.spectra-button__hover-icon {
		display: none; // Hidden by default
		align-items: center;
		font-size: inherit;
		fill: var(--spectra-icon-color, var(--spectra-text-color-hover, currentColor));

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

// Border hover support with high specificity class to override core WordPress border styles
.editor-styles-wrapper .wp-block-button .wp-block-spectra-pro-form-button.wp-block-button__link.spectra-border-hover-override {
	// Reset all core WordPress border styles on hover to ensure our border hover takes precedence
	&:focus,
	&:hover {
		// Reset core border properties
		border-color: unset !important;
	}

	// Border hover support - flat border (all sides)
	&.spectra-border-hover:focus,
	&.spectra-border-hover:hover {
		border: var(--spectra-border-hover) !important;
	}

	// Border hover support - split borders (individual sides)
	&.spectra-border-hover-top:focus,
	&.spectra-border-hover-top:hover {
		border-top: var(--spectra-border-hover-top) !important;
	}

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

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

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

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

// Shadow hover support with high specificity class to override core WordPress shadow styles
.editor-styles-wrapper .wp-block-button .wp-block-spectra-pro-button.wp-block-button__link.spectra-shadow-hover-override {
	// Reset all core WordPress shadow styles on hover to ensure our shadow hover takes precedence
	&:focus,
	&:hover {
		// Reset core shadow properties
		box-shadow: unset !important;
	}

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

// Button alignment styles in editor 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;
	}
}
