/**
 * Axismundi — core/button component layer.
 *
 * theme.json (styles.elements.button + core/button.variations.outline) owns the
 * full M3 Small button surface: filled/outlined colour, 40dp geometry, 16dp
 * leading/trailing, label-large type, hover/focus/active state layers, the M3
 * focus ring, and the pressed shape value (20px -> 8px). This file holds only
 * what theme.json cannot express or what core block styles can leak around:
 * the shared border-box button model plus motion. The transition animates the
 * pressed shape morph and the state-layer colour change continuously instead
 * of jumping. True M3 spring physics (damping/stiffness, interruptible) would
 * need JS/Web Animations; a CSS transition is the right weight here.
 */

.wp-element-button {
	box-sizing: border-box;
	transition:
		border-radius var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
		background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button {
		transition: none;
	}
}

/**
 * Keyboard-only focus ring. theme.json can only emit plain :focus, which also
 * fires on pointer/click focus. Suppress the M3 ring (theme.json :focus.outline)
 * when focus is NOT keyboard-driven; the focus state-layer colour still applies.
 */
.wp-element-button:focus:not(:focus-visible) {
	outline: none;
}

/**
 * core/button M3 colour variants — tonal / elevated / text.
 *
 * Registration + Global Styles discoverability live in the auto-registered
 * partials (styles/blocks/button-*.json). The actual surface is enforced here
 * because a partial's styles.elements.button emits a broken DESCENDANT selector
 * in the editor canvas / Stylebook preview — `.is-style-X .wp-block-button__link
 * .wp-element-button` — treating the link's two classes as nested elements, so
 * it never matches the single <a class="wp-block-button__link wp-element-button">
 * and the variant falls back to Filled in the editor. These public-class rules
 * match in both the editor and the front end. Base + state layer (the "on" role
 * mixed over the container at the shared --md-sys-state-* opacities); the focus
 * ring, keyboard-only suppression, and pressed shape morph are inherited.
 *
 * WORKAROUND — REMOVE WHEN Trac #65436 LANDS. This block duplicates the partials
 * (styles/blocks/button-*.json) on purpose: the partials are the correct standard
 * source of truth, this is only the editor-parity shim. Once core emits the right
 * variation selector, delete this whole section; the partials render everywhere.
 */
.wp-block-button.is-style-tonal .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}
.wp-block-button.is-style-tonal .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
}
.wp-block-button.is-style-tonal .wp-block-button__link:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
}
.wp-block-button.is-style-tonal .wp-block-button__link:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
}

.wp-block-button.is-style-elevated .wp-block-button__link {
	background-color: var(--wp--preset--color--surface-container-low);
	color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--elevation-1);
}
.wp-block-button.is-style-elevated .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--surface-container-low));
}
.wp-block-button.is-style-elevated .wp-block-button__link:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--wp--preset--color--surface-container-low));
}
.wp-block-button.is-style-elevated .wp-block-button__link:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--wp--preset--color--surface-container-low));
}

.wp-block-button.is-style-text .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-text .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
}
.wp-block-button.is-style-text .wp-block-button__link:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
}
.wp-block-button.is-style-text .wp-block-button__link:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
}