/*
 * core/group — the design's list of onward links (`is-style-link-list`).
 *
 * One row, straight out of Figma (18155-5855, and the same component at 375):
 *
 *   ┌─────────────────────────────────────────────────────────┐
 *   │ ─────────────────────────────────────────────────────── │  1px, black 20%
 *   │  ▣   STREAMING SERVICE                              →   │  12px py
 *   │ ─────────────────────────────────────────────────────── │
 *   │  ▣   HARDWARE                                       →   │
 *   └─────────────────────────────────────────────────────────┘
 *
 * A 16px icon, 16px of air, the label in SH2's caps, and the arrow ranged right.
 * Every rule between two rows is the lower one's top border; the list closes with
 * a bottom border on the last row, which is what the design draws and what a
 * `border-block-end` on the container would get wrong the moment an editor
 * reordered something.
 *
 * ## What this expects to find inside it
 *
 * A vertical flex `core/group`, and inside it one `core/group` per row holding a
 * `core/icon` and a `core/buttons` with one `core/button` in it.
 * `includes/styles/blocks/core-group-link-list.php` explains why a row is more
 * than one block: no core block is both an icon and a link, and the icons are the
 * point of the list.
 *
 * **The `core/buttons` wrapper is not optional and not tidiable away.**
 * `core/button` declares `"parent": [ "core/buttons" ]`, so a bare button in a
 * group is uninsertable in the editor and recovers as invalid content in a
 * pattern. Three levels for one row is what native costs here; the alternative is
 * a paragraph with a link buried in a text format, which
 * `assets/css/blocks/button-inline-link.css` exists to avoid.
 *
 * The selectors are deliberately shallow — `> .wp-block-group` for a row, and the
 * button's own classes for the link — so a row can grow a third child (a count, a
 * badge) without this file knowing. What it must not lose is the button: a row
 * without one has no arrow, which reads as a missing link.
 *
 * ## The arrow is a glyph, and it is inside the link
 *
 * U+2192 in the button's own family, which is the decision
 * `assets/css/blocks/button-icon.css` already makes for the design's call to
 * action: a character, not an asset, so it is `currentColor` without being asked
 * and it scales with the type. It is drawn as the *button's* `::after` rather
 * than the row's, so it is part of what a reader clicks and part of what a screen
 * reader's link is — an arrow on the row would sit outside the hit area it
 * advertises.
 *
 * `content: "\2192"` and not a literal character in this file: an `@charset`-less
 * stylesheet served as anything but UTF-8 renders a literal arrow as mojibake,
 * and the escape has no encoding to get wrong.
 *
 * The row's hover state is that arrow moving, and nothing else — the default
 * button style's `currentColor` wash is switched off here, because on a bare row
 * of text it is a highlighter pen rather than a fill lightening. See the note on
 * the `::before` below.
 *
 * ## What is deliberately not here
 *
 * The icon's size and colour. `core/icon` has a width control and a text colour
 * control, and both belong to the editor — `patterns/orbit-scroll-intro.php`
 * sets 16px and lets the colour inherit. Sizing it from here would put a number
 * an editor can see in the inspector, and change nothing when they moved it.
 */
.wp-block-group.is-style-link-list {
	/* The design's row: 12px above and below the label, and a hairline rule. */
	--kg-link-list-air: 0.75rem;
	--kg-link-list-rule: 1px solid var(--wp--custom--overlay-black-20);

	/*
	 * The rows meet, so any gap the group carried would push the shared rules
	 * apart into two lines with a stripe of ground between them. `!important` is
	 * not needed: core writes `blockGap` as a `gap` on the block's own
	 * `:root :where(…)` rule, which contributes no specificity.
	 */
	gap: 0;
}

.wp-block-group.is-style-link-list > .wp-block-group {
	display: flex;
	gap: var(--wp--preset--spacing--md);
	align-items: center;
	padding-block: var(--kg-link-list-air);
	border-block-start: var(--kg-link-list-rule);
}

.wp-block-group.is-style-link-list > .wp-block-group:last-child {
	border-block-end: var(--kg-link-list-rule);
}

/*
 * The link fills what the icon leaves, so the arrow is at the row's right edge
 * however short the label is — and so the whole of that width is clickable,
 * which a shrink-to-fit link would not be. Both wrappers grow, because the
 * button is a flex item of `core/buttons` and `core/buttons` is a flex item of
 * the row: growing only one of them leaves the other hugging its label.
 */
.wp-block-group.is-style-link-list .wp-block-buttons,
.wp-block-group.is-style-link-list .wp-block-button {
	flex: 1 0 0;
	min-inline-size: 0;
}

.wp-block-group.is-style-link-list .wp-block-button__link {
	/*
	 * Everything the button normally is, taken back off: no fill, no padding, no
	 * control height. `assets/css/blocks/button.css` is the theme's *default*
	 * button style and it gives every button a 44px flex box — correct for a
	 * control, wrong for a row in a list. This is a class deeper than that file's
	 * selector, which is what lets it win without an `!important`.
	 */
	display: flex;
	gap: var(--wp--preset--spacing--md);
	align-items: center;
	justify-content: space-between;
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--none);
	background: none;

	/*
	 * Figma's "Sub Heading / SH2 12" — 12px, 700, `0.1em`, uppercase, leading 1 —
	 * which the theme already binds to `h6`. Restated rather than reached for
	 * through an element, because this is a link and not a heading.
	 *
	 * `color: inherit` so the entry's own text colour decides, the same choice
	 * `assets/css/blocks/button-inline-link.css` makes: the design draws these
	 * black on a pale ground, and a section on a dark ground should get the light
	 * ones without an override here.
	 */
	color: inherit;
	font-size: var(--wp--preset--font-size--sh-2);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing-caps);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-group.is-style-link-list .wp-block-button__link::after {
	/*
	 * The arrow: U+2192, one size up from the label because the design draws it
	 * at 14px against the label's 12. No letter spacing — it is trailing, so on a
	 * single glyph it is a phantom space that pushes the arrow off the row's right
	 * edge by a tenth of its own size.
	 */
	content: "\2192";
	flex: none;
	font-size: var(--wp--preset--font-size--body-s);

	@media not (prefers-reduced-motion: reduce) {
		transition: translate 0.3s var(--wp--custom--transition-spring-smooth);
	}
}

/*
 * The default button style's `currentColor` wash, switched off. **This is a bug
 * fix and not a preference**, and it is the whole reason the rows looked wrong.
 *
 * `button.css` paints every button's hover, focus and active states as a
 * `::before` filled with `currentcolor` at 12%, which is the only way a state
 * colour survives an editor picking a palette background — that file documents
 * the `!important` trap at length. On a control it reads as the fill lightening.
 * **On a bare row of text it is a highlighter pen**: a 12% black box appearing
 * behind the label *and* across the whole width of the row, rule to rule, the
 * moment the cursor crosses it. `button-inline-link.css` reaches the same
 * conclusion for the same reason, and `content: none` rather than `opacity: 0`
 * is its wording too — it removes the pseudo-element instead of leaving a box
 * that still participates.
 *
 * What is left is the arrow's nudge below, which is the theme's own gesture for
 * a call to action (`button-icon.css`) rather than something invented here, and
 * moves nothing else on the row.
 */
.wp-block-group.is-style-link-list .wp-block-button__link::before {
	content: none;
}

/*
 * The arrow slides toward the edge it points at, exactly as the theme's call to
 * action does. A row that is a link has to say so, and this is where it costs
 * nothing — no colour to fight a palette class for, no reflow, and the rule and
 * the label stay exactly where they are.
 */
@media (hover: hover) {
	.wp-block-group.is-style-link-list .wp-block-button__link:hover::after {
		translate: 0.25rem 0;
	}
}

.wp-block-group.is-style-link-list .wp-block-button__link:focus-visible::after {
	translate: 0.25rem 0;
}

/*
 * The icon, on the one thing that is not the editor's to decide: it must not
 * shrink. `core/icon` renders a wrapper `<div>` around the `<svg>` the width
 * control sizes, and a flex item with no `flex` of its own is shrinkable — so a
 * long label squeezes the glyph out of square before it wraps.
 */
.wp-block-group.is-style-link-list .wp-block-icon {
	flex: none;
	display: flex;
	align-items: center;
}