/*
 * core/button — the "Inline link" style.
 *
 * Registered opt-in by `includes/styles/blocks/core-button.php`, activated by
 * `is-style-inline-link` on the button.
 *
 * A call to action that reads as a link in a column of prose rather than as a
 * control: no fill, no padding, no control height, an underline. It is still a
 * `core/button`, which is the point — the destination is the Button block's own
 * URL field, with its target and `rel` beside it, instead of a URL buried in a
 * text format inside a paragraph that also carries four typography overrides
 * nothing in the editor explains.
 *
 * ## The colour is the editor's, and most of this file is what protects that
 *
 * `theme.json`'s `styles.elements.button` paints every button `white` on
 * `brand-blue`, which as a line of prose on a white card is an invisible label.
 * So the fill goes and the colour becomes `inherit`: the link takes the colour
 * of the copy around it until someone picks one in the Color panel, and a
 * picked colour then wins outright — core emits palette classes as
 * `.has-woodsmoke-color { color: … !important }`. The design's black "Read
 * more" is that control set to `woodsmoke`, where an editor can see it.
 *
 * A background someone picks wins too, deliberately: nothing here is
 * `!important`, so the style opts a button out of the theme's fill without
 * arguing with anyone who wants one back.
 *
 * ## The state is the underline, because nothing else can be
 *
 * **The colour cannot be the hover state.** That same `!important` beats any
 * rule this file could write — the trap `button.css` documents at length, which
 * fails selectively: it would work while an editor picked custom hexes and die
 * the moment they chose a swatch. And the default style's answer to it, a
 * `currentColor` wash on a `::before`, is a filled box behind the text; on a
 * button that is the fill lightening, on a bare link it reads as a highlighter
 * pen. So the overlay is switched off here rather than inherited.
 *
 * What is left is the underline, inverted: on at rest, off on hover and focus.
 * `ui-states.css` makes the same trade for a navigation item in the other
 * direction — a plain link has none and gains one — and it needs no colour, no
 * motion and no `transition`, so it cannot collide with the shared transition
 * list that file sets on every `.wp-block-button__link`.
 *
 * The underline is here rather than on the block's Decoration control for one
 * reason: an editor-set `text-decoration` is an inline style, and an inline
 * style beats the hover rule below, leaving a link underlined in both states.
 * The control still works — set it and it wins everywhere, which is the honest
 * result for someone who wants a link without an underline.
 */

.wp-block-button.is-style-inline-link .wp-block-button__link {
	/*
	 * `inline` rather than core's `inline-block` and the default style's
	 * `flex`: the box is then exactly the glyphs, and a label that wraps takes
	 * its underline with it line by line.
	 */
	display: inline;
	/* Both from the default style, and both are what makes a button a control. */
	min-block-size: auto;
	padding: 0;
	background-color: transparent;
	color: inherit;
	text-decoration: underline;
}

/*
 * `content: none` removes the pseudo-element rather than hiding a box that
 * still participates — see the wash's own argument in `button.css`.
 */
.wp-block-button.is-style-inline-link .wp-block-button__link::before {
	content: none;
}

@media (hover: hover) {
	/* Guarded, so a tap does not leave the last link without its underline. */
	.wp-block-button.is-style-inline-link .wp-block-button__link:hover {
		text-decoration: none;
	}
}

.wp-block-button.is-style-inline-link .wp-block-button__link:focus-visible {
	text-decoration: none;
}