/*
 * The generated brand-asset pills, in every state.
 *
 * ⚠️ This exists because `is-style-outline` alone is not enough on a
 * server-rendered block, which is the opposite of what reading the CSS
 * suggested and was only caught by looking at the rendered page.
 *
 * Core registers the outline style as
 * `:root :where(.wp-block-button.is-style-outline > .wp-block-button__link)`.
 * `:where()` contributes nothing to specificity, so the whole selector scores
 * 0,1,0 and loses to the theme's own button background on source order alone.
 * In SAVED content that never shows, because core's block-style-variation pass
 * scans post content and emits a numbered `.is-style-outline--N` rule with real
 * specificity for every instance it finds. A dynamic block is never scanned, so
 * its buttons get the zero-specificity version and render as filled buttons.
 *
 * ⚠️ The hover and focus rules below are NOT decoration — leaving them out is
 * what made a hovered pill vanish. The page's own `.ba-chips …:hover` rule
 * scores 0,3,0; the rest-state rule here scores 0,4,0. So the page's white text
 * applied and its blue fill did not: white on white, measured as
 * `background-color: rgba(0,0,0,0)` with `color: rgb(255,255,255)` on the live
 * page. Clicking a pill left it invisible too, because an anchor keeps focus
 * after the jump. Any rule that pins the rest-state background has to define
 * the other states at the same specificity or higher, or it silently wins the
 * states it never meant to touch.
 *
 * The colours come from the theme palette with literal fallbacks, so the pills
 * are legible on their own rather than depending on a page's custom CSS.
 */
.ffalic-asset-pills {
	/* Border and text at rest; the fill once the pill is hovered or focused. */
	--ffalic-pill-line: var( --wp--preset--color--ffa-blue, #004c97 );
	/* Text on top of that fill. */
	--ffalic-pill-on: var( --wp--preset--color--white, #fff );
}

.ffalic-asset-pills .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	background-image: none;
	border-color: var( --ffalic-pill-line );
	border-style: solid;
	border-width: 2px;
	color: var( --ffalic-pill-line );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ffalic-asset-pills .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.ffalic-asset-pills .wp-block-button.is-style-outline > .wp-block-button__link:focus,
.ffalic-asset-pills .wp-block-button.is-style-outline > .wp-block-button__link:active {
	background-color: var( --ffalic-pill-line );
	color: var( --ffalic-pill-on );
}

/*
 * Keyboard focus needs a mark of its own. The fill above is shared with hover,
 * so on its own it does not tell a keyboard user where they are.
 */
.ffalic-asset-pills .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	outline: 2px solid var( --ffalic-pill-line );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {

	.ffalic-asset-pills .wp-block-button.is-style-outline > .wp-block-button__link {
		transition: none;
	}
}