/*
 * Buttons: states for every variant.
 * Static colors come from theme.json and inc/blocks/block-styles.php; this file only
 * adds interaction states and what theme.json cannot express.
 * Variants: default (Primary), is-style-secondary, is-style-outline, is-style-ghost,
 * is-style-destructive, is-style-inverse, is-style-compact.
 * Modifiers: .has-arrow (leading arrow icon), .is-disabled or aria-disabled="true".
 */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	min-height: var(--wp--custom--target);
	transition:
		background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

/* Primary: default button, color on hover from theme.json elements.button; lifts 1px, presses in. */
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	box-shadow: var(--wp--preset--shadow--card);
}
@media (hover: hover) and (pointer: fine) {
	.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
		transform: translateY(-1px);
	}
}
.wp-block-button .wp-block-button__link:active {
	transform: scale(0.985);
	transition-duration: var(--wp--custom--motion--press);
}

/* Secondary */
.wp-block-button.is-style-secondary .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--navy-hover);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-secondary .wp-block-button__link:active {
	background-color: var(--wp--preset--color--navy-deep);
}

/* Outline: fills orange on hover. */
.wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-outline .wp-block-button__link:active {
	background-color: var(--wp--preset--color--orange-hover);
	border-color: var(--wp--preset--color--orange-hover);
}

/* Ghost: faint navy wash on hover. */
.wp-block-button.is-style-ghost .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--custom--ghost-hover);
	color: var(--wp--preset--color--navy-deep);
}

/* Destructive */
.wp-block-button.is-style-destructive .wp-block-button__link:is(:hover, :focus-visible, :active) {
	background-color: var(--wp--preset--color--error-hover);
	color: var(--wp--preset--color--white);
}

/* Inverse: for dark grounds, fills white on hover. */
.wp-block-button.is-style-inverse .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

/* Compact */
.wp-block-button.is-style-compact .wp-block-button__link {
	gap: 0.375rem;
	min-height: 2rem;
}
.wp-block-button.is-style-compact .wp-block-button__link:is(:hover, :focus-visible, :active) {
	background-color: var(--wp--preset--color--lime-hover);
	color: var(--wp--preset--color--navy-deep);
}

/* Focus ring. Inverse sits on dark grounds, so it rings in yellow. */
.wp-block-button__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy);
	outline-offset: var(--wp--custom--focus--offset);
}
.wp-block-button.is-style-inverse .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--yellow);
}

/* Leading arrow icon, matching the design's lucide arrow-right. */
.wp-block-button.has-arrow .wp-block-button__link::before {
	content: "";
	flex: none;
	width: var(--wp--custom--icon--button);
	height: var(--wp--custom--icon--button);
	background-color: currentColor;
	-webkit-mask: var(--pqmd-icon-arrow) center / contain no-repeat;
	mask: var(--pqmd-icon-arrow) center / contain no-repeat;
}

/* Disabled: design opacity 0.42, no interaction. */
.wp-block-button.is-disabled .wp-block-button__link,
.wp-block-button__link[aria-disabled="true"] {
	opacity: 0.42;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}