/*
 * How every button behaves. Registered as `core/button`'s **default** style by
 * `includes/styles/blocks/core-button.php`, so it applies without an editor
 * choosing anything.
 *
 * `theme.json`'s `styles.elements.button` already owns the radius, the padding,
 * the type, the rest colours and the focus ring, and `ui-states.css` owns the
 * colour transition every button and link shares. Two things neither can say are
 * here.
 *
 * ## 1. A control height core's `inline-block` cannot honour
 *
 * The design gives every control a height rather than a padding sum, and
 * `min-block-size` needs a box that can centre against it.
 *
 * ## 2. State fills that survive an author picking a colour
 *
 * This is the part worth reading. A hover fill written in theme.json is emitted
 * as `:root :where(.wp-element-button:hover) { background-color: … }` — one
 * class's worth of specificity, and not `!important`. Core emits its palette
 * classes as
 *
 *     .has-brand-blue-background-color { background-color: … !important }
 *
 * so **the moment an editor picks a background colour, every state colour from
 * theme.json is silently dropped.** It fails selectively, which is the trap: a
 * custom hex is serialised inline and does lose to the state rule, so the effect
 * works while someone picks custom colours and dies when they choose a swatch.
 * lanopro and norvara-v2 both hit this and neither solves it — their buttons are
 * simply never recoloured. Nenda's header has a white button and a blue one, both
 * carrying palette classes, so it cannot rely on that.
 *
 * The way out is not to fight for `background-color` at all: a `::before` layer
 * sits between the button's background and its label and washes whatever colour
 * is underneath.
 *
 * The wash is `currentColor`, which is what makes one rule enough — a light
 * button has dark text so it darkens, a dark button has light text so the same
 * declaration lightens. Nothing here names a colour and nothing needs a
 * per-variation rule.
 *
 * **What the states change is the overlay's `opacity`, not its colour.** That is
 * not a stylistic choice. The obvious version of this — one element, a
 * `background-image` wash whose colour the states swap — cannot be animated:
 * `currentcolor` inside a registered `<color>` custom property is not resolvable
 * at computed-value time, so Chrome keeps the `color-mix()` unevaluated and there
 * is nothing to interpolate. It applies, and it snaps. `opacity` is a plain
 * number that always interpolates, and `background-color: currentcolor` on the
 * overlay resolves normally.
 *
 * The transition lives on the overlay, so it cannot collide with the one
 * `ui-states.css` sets on the button itself — `transition` replaces rather than
 * extends, and two declarations at equal specificity on the same element leave
 * the loser's properties not transitioning at all.
 */

.wp-block-button .wp-block-button__link {
	--kg-button-wash: 0;

	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	/* 44px — the design's control height, shared with the header bar. */
	min-block-size: 2.75rem;
	/*
	 * So the overlay's negative z-index stays inside the button rather than
	 * dropping behind whatever the button is sitting on.
	 */
	isolation: isolate;
	text-decoration: none;
}

.wp-block-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* Follows a radius set on the button, whatever an editor picks. */
	inset: 0;
	border-radius: inherit;
	background-color: currentcolor;
	opacity: var(--kg-button-wash);
	/*
	 * Not wrapped in a reduced-motion guard, following norvara-v2: the
	 * preference is about things travelling across the screen and taking the
	 * eye with them, and a fade in place is closer to what it wants than to
	 * what it avoids. Movement — the arrow's nudge in button-icon.css — is
	 * guarded.
	 */
	transition: opacity 0.2s var(--wp--custom--transition-spring-smooth);
}

@media (hover: hover) {
	/* Guarded, so a tap does not leave the last button washed on a phone. */
	.wp-block-button .wp-block-button__link:hover {
		--kg-button-wash: 0.12;
	}
}

.wp-block-button .wp-block-button__link:focus-visible {
	--kg-button-wash: 0.12;
}

/* Pressed reads as further in the same direction, not as a third colour. */
.wp-block-button .wp-block-button__link:active {
	--kg-button-wash: 0.22;
}