/**
 * Submit button block styles.
 *
 * Button colors come from theme via .wp-block-button.is-style-* classes.
 * This file handles layout, hover effects, spinner, and width variations.
 *
 * @package TGP\Forms
 */

/* Wrapper - inline display to wrap button tightly, no border */
.wb-submit-button {
	display: inline-block;
	border: none;
}

/**
 * Inner button base styles.
 *
 * The button uses .wp-element-button class which receives WordPress's
 * global button element styles (colors, border-radius, padding, typography)
 * defined in theme.json or Site Editor.
 *
 * IMPORTANT: We use :where() for reset properties so they don't override
 * WordPress's button element styles (which also use :where() with 0 specificity).
 * This allows WordPress's button styles to win because they come later in cascade.
 */
.wb-submit-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	white-space: nowrap;
	cursor: pointer;
	/* Remove browser button appearance */
	appearance: none;
	-webkit-appearance: none;
	/* Smooth transitions for interactive states */
	transition: filter 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

/**
 * Reset browser button defaults with :where() so WordPress button styles can override.
 * WordPress uses :where(.wp-element-button) for button element styles - same 0 specificity.
 * Since WordPress styles load after ours, they will win in the cascade.
 */
:where(.wb-submit-button__button) {
	background: transparent;
	border: none;
	font: inherit;
}

/* Hover effect - works with any theme color */
.wb-submit-button .wb-submit-button__button:hover:not(:disabled) {
	filter: brightness(0.92);
}

/* Disabled state during submission */
.wb-submit-button__button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

/* Loading spinner - uses currentColor to match button text */
.wb-submit-button__spinner {
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wb-submit-spin 0.8s linear infinite;
	flex-shrink: 0;
}

.wb-submit-button__spinner[hidden] {
	display: none;
}

@keyframes wb-submit-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Button text */
.wb-submit-button__text {
	white-space: nowrap;
}

/* Default state: hide spinner and loading text */
.wb-submit-button__spinner {
	display: none;
}

.wb-submit-button__text--loading {
	display: none;
}

/* Submitting state: show spinner and loading text, hide default text */
.wp-block-workbench-form.is-submitting .wb-submit-button__spinner {
	display: inline-block;
}

.wp-block-workbench-form.is-submitting .wb-submit-button__text:not(.wb-submit-button__text--loading) {
	display: none;
}

.wp-block-workbench-form.is-submitting .wb-submit-button__text--loading {
	display: inline;
}

/* Width variations (match core/button) */
.wb-submit-button.has-custom-width {
	display: block;
}

.wb-submit-button.has-custom-width .wb-submit-button__button {
	width: 100%;
}

.wb-submit-button.wp-block-button__width-25 {
	width: 25%;
}

.wb-submit-button.wp-block-button__width-50 {
	width: 50%;
}

.wb-submit-button.wp-block-button__width-75 {
	width: 75%;
}

.wb-submit-button.wp-block-button__width-100 {
	width: 100%;
}

/*
 * Style variations - provide default colors when user hasn't set custom colors.
 * Uses :where() for low specificity so inline styles from user overrides win.
 * Uses :not(.has-background) and :not(.has-text-color) to allow custom colors.
 */

/* Brand (Default) - Primary color background, base text */
:root :where(.wb-submit-button.is-style-button-brand) .wb-submit-button__button:not(.has-background) {
	background-color: var(--wp--preset--color--primary, #0056b3);
}
:root :where(.wb-submit-button.is-style-button-brand) .wb-submit-button__button:not(.has-text-color) {
	color: var(--wp--preset--color--base, #fff);
}

/* Brand Alt - Primary alt color background */
:root :where(.wb-submit-button.is-style-button-brand-alt) .wb-submit-button__button:not(.has-background) {
	background-color: var(--wp--preset--color--primary-alt, #6c757d);
}
:root :where(.wb-submit-button.is-style-button-brand-alt) .wb-submit-button__button:not(.has-text-color) {
	color: var(--wp--preset--color--base, #fff);
}

/* Dark - Contrast/dark background */
:root :where(.wb-submit-button.is-style-button-dark) .wb-submit-button__button:not(.has-background) {
	background-color: var(--wp--preset--color--contrast, #1e1e1e);
}
:root :where(.wb-submit-button.is-style-button-dark) .wb-submit-button__button:not(.has-text-color) {
	color: var(--wp--preset--color--base, #fff);
}

/* Light - Base/light background */
:root :where(.wb-submit-button.is-style-button-light) .wb-submit-button__button:not(.has-background) {
	background-color: var(--wp--preset--color--base, #fff);
}
:root :where(.wb-submit-button.is-style-button-light) .wb-submit-button__button:not(.has-text-color) {
	color: var(--wp--preset--color--contrast, #1e1e1e);
}

/* Outline - Transparent background, primary border and text */
:root :where(.wb-submit-button.is-style-outline) .wb-submit-button__button:not(.has-background) {
	background-color: transparent;
}
:root :where(.wb-submit-button.is-style-outline) .wb-submit-button__button:not(.has-text-color) {
	color: var(--wp--preset--color--primary, #0056b3);
}
:root :where(.wb-submit-button.is-style-outline) .wb-submit-button__button {
	border: 1px solid currentColor;
}