/*
 * core/list — the link pills.
 *
 * LinkGrid.astro + _link-grid.scss: a wrapping row of outlined links, 0.75rem
 * apart, filling on hover with the arrow sliding a quarter rem to the right.
 *
 * Registered as a block style in functions.php so it appears in the editor's
 * Styles panel. Loaded only on pages that contain a list block.
 */

:root .wp-block-list.is-style-link-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .is-style-link-pills li {
	margin: 0;
}

:root .is-style-link-pills li a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var( --wp--preset--color--primary );
	padding: 0.75rem 1.25rem;
	color: var( --wp--preset--color--primary );

	/* _link-grid.scss gives the link no size of its own, so it is body text at
	   1rem/1.6 rather than the 1.0625rem/1.8 of rich text. The difference is
	   five pixels per box, and a whole extra row on mobile. */
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

/* In the source the arrow is a 16x16 heroicons SVG, not a text arrow: the
   font's arrow glyph is 14.4px wide, which left every box two pixels short.
   The same line is drawn as a mask so the colour follows currentColor. */
:root .is-style-link-pills li a::after {
	content: '';
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	background-color: currentcolor;
	mask: var( --vml-arrow ) center / contain no-repeat;
	transition: transform 200ms ease;
}

:root .is-style-link-pills li a:hover,
:root .is-style-link-pills li a:focus-visible {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
}

:root .is-style-link-pills li a:hover::after {
	transform: translateX(0.25rem);
}