/*
 * `Link row` — the quiet hairline row the product page uses as a list item.
 *
 * Figma node 15863:20878, the "Section - DOWNLOADS + VIDEO" frame: a 596x60 pill with a
 * hairline rim and 13px corners, a 30px pale-green plate holding a 12px glyph 19px in, the
 * item's name at 14px beside it, and a 16px `+` against the trailing edge. The design draws
 * the same row twice — once per downloadable document, once per related product — so it is
 * one component here too, and the two lists differ only in which glyph the plate holds and
 * where the row leads.
 *
 * ## What is a block attribute and what is in this file
 *
 * The split `group-article-card.css` sets out applies: the row's padding, its gap, its flex
 * layout and every type token stay attributes in `patterns/downloads-and-video.php`, so an
 * editor can re-space the row or rewrite its label and it still works. This file holds the
 * four things an attribute cannot express —
 *
 * - the rim, which has to be an inset `box-shadow` rather than a `border` (silent failure
 *   41: Figma draws a stroke *inside* the frame, so the design's 1px is within the 60px and
 *   a border would make every row 62 and misalign the two lists against each other),
 * - the 12px corner, which is not on the `border-radius` scale,
 * - the glyph's plate, whose fill is a `color-mix()` against the palette and therefore
 *   cannot be a colour attribute at all,
 * - and the states, which no block support has.
 *
 * ## Not to be confused with `group-link.css`
 *
 * That file is the *feature* — the overlay anchor `includes/blocks/group-link.php` injects
 * to make a whole Group one click target, plus the pointer, the focus ring and the press
 * dip every linked Group gets. This file is one **look** for a Group that has been given
 * such a link. The two are stacked deliberately: the row below inherits the ring and the
 * dip from there and adds only its own fill.
 */

/*
 * The rim and the corner.
 *
 * `transparent` rather than white, and the reason is the same one
 * `document-downloads-grid.css` gives: the section this row sits in is already white, so a
 * white fill is the same pixels with one more thing to keep in step — and a fill declared
 * as a `backgroundColor` attribute would come with core's `!important` preset class, which
 * the hover below could then not override without an `!important` of its own.
 *
 * 12px is not on the radius scale — the steps around it are `sm` (8px) and `md` (16px) —
 * and it is the same corner, on the same page, that `document-downloads-grid.css` states as
 * a literal for the same reason. Two files stating one component's corner is the cost of
 * that corner not being a token; changing it means changing both.
 */
.wp-block-group.is-style-link-row {
	background-color: transparent;
	border-radius: 0.75rem;
	box-shadow: inset 0 0 0 1px var(--wp--custom--overlay-black-10);
	box-sizing: border-box;
}

/*
 * Neither glyph shrinks.
 *
 * Core's flex layout sets no `flex` on a Group's children, so both icons are free to be
 * squeezed by a long name — and an icon squeezed by 3px reads as a badly drawn icon rather
 * than as a layout running out of room. The name gives way instead, in the rule after next.
 */
.wp-block-group.is-style-link-row > .wp-block-icon {
	flex: 0 0 auto;
}

/*
 * The leading glyph's plate — the design's 30px square, built out of the glyph's own box.
 *
 * 9px of padding around a 12px icon is 30px, so the plate's size is never stated: it
 * follows whatever width the Icon block is given, and an editor moving that glyph to 16px
 * gets a 34px plate rather than a 12px icon rattling around inside a hard-coded square.
 * That is also what sets the row's height — 16px of padding, a 30px plate and 16px again is
 * 62px against the design's 60 — so a name wrapping to two lines is paid for by the row
 * growing, which is the right direction.
 *
 * The plate is on the Icon block's wrapper `<div>` and **not** on its `<svg>`, which
 * `core-icon.php` explains at length: Safari clips an inline SVG's content to the element's
 * own `border-radius` whatever `overflow` says, so a radius and a glyph on the same `<svg>`
 * shave the glyph's corners on every iPhone. Core gives the wrapper `line-height: 0`, so
 * there is no baseline gap under the icon to subtract.
 *
 * `color-mix()` against the palette rather than the design's literal `rgba(0, 56, 40, 0.08)`
 * — the theme's rule for a derived colour, and the same shape `group-article-card.css` uses
 * for its shadow. It matters more than usual here that the fill stays *translucent*: the
 * design's own hover state fills the row underneath it, and a flattened plate would
 * disappear into that fill the moment the cursor arrived.
 *
 * 7px is the design's radius, and it is not on the scale either. It is stated on the plate
 * rather than rounded to `sm` (8px) because at 30px the difference between 7 and 8 is
 * visible next to the row's own 12.
 */
.wp-block-group.is-style-link-row > .wp-block-icon:first-of-type {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--brand-dark-green) 8%,
		transparent
	);
	border-radius: 0.4375rem;
	padding: 0.5625rem;
}

/*
 * The name takes the slack, and everything after it goes to the trailing edge.
 *
 * `margin-inline-end: auto` on the label rather than `margin-inline-start: auto` on the
 * trailing glyph: it puts the rule on the element that is always there, so a row that ends
 * with two glyphs, or with none, still lays out. `min-inline-size: 0` is what lets a long,
 * unbroken product name give way instead of pushing the `+` off the row — a flex item's
 * default minimum is its content.
 */
.wp-block-group.is-style-link-row > p {
	margin-inline-end: auto;
	min-inline-size: 0;
}

/*
 * The one state the design draws, and it is drawn on a row that has somewhere to go.
 *
 * Figma's first download pill is filled where the other four are clear (`#f2f5f4` against
 * white) — a hover state caught in a still, which is the usual way a mock-up shows one, and
 * exactly the reading `document-downloads-grid.css` took of the same page's other list.
 * `neutral-50` is that `#f2f5f4` to within a digit.
 *
 * **`:has(> .link-area)` gates all three states**, because a row is only a control once an
 * editor has given it a link: the pattern ships the five rows without one, and a row that
 * lit up under the cursor while leading nowhere would be a promise the page cannot keep.
 * It is the same test `group-link.css` uses for the pointer and the press.
 *
 * The design's hovered pill also swaps its rim from `rgba(0, 0, 0, 0.08)` to
 * `rgba(0, 56, 40, 0.15)`. That is deliberately not reproduced: it is a 7% darkening
 * arriving at the same moment as a fill, which is a difference nobody can name, and one rim
 * colour for the component is one thing to keep in step with the rest of the theme's
 * hairlines.
 *
 * `:hover` inside `@media (hover: hover)` so a tap does not leave the last row lit;
 * `:focus-within` and `:active` outside it, because a keyboard reader needs the cue on every
 * device and a press has to acknowledge itself. `neutral-100` for the press is the step past
 * `neutral-50` that `outline-pill.css` and the downloads grid already press to.
 *
 * No `transition` here on purpose: `group-link.css` owns the linked Group's whole transition
 * list, and `transition` is one property — a second declaration on this box would replace
 * the press dip's easing rather than add to it (its own comment records that going wrong).
 * Adding `background-color` to the list belongs in that file if it is ever wanted.
 */
.wp-block-group.is-style-link-row:has(> .link-area):focus-within {
	background-color: var(--wp--preset--color--neutral-50);
}

.wp-block-group.is-style-link-row:has(> .link-area):active {
	background-color: var(--wp--preset--color--neutral-100);
}

@media (hover: hover) {
	.wp-block-group.is-style-link-row:has(> .link-area):hover {
		background-color: var(--wp--preset--color--neutral-50);
	}
}