/* Paragraph
--------------------------------------------- */

/*
 * Eyebrow: a pill-shaped label with a leading status dot, used to introduce
 * a section ("The Problem", "The Solution").
 */
p.is-style-eyebrow {
	align-items: center;
	align-self: flex-start;
	background-color: var(--wp--preset--color--deep-purple-10-trn);
	border-radius: 999px;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--3-x-small);
	font-weight: var(--wp--custom--font-weight--bold);
	gap: var(--wp--preset--spacing--8);
	letter-spacing: 0.08em;
	line-height: var(--wp--custom--line-height--tight);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	text-transform: uppercase;
}

p.is-style-eyebrow::before {
	content: "";
	background-color: var(--wp--preset--color--emerald);
	border-radius: 50%;
	flex: 0 0 auto;
	height: 8px;
	/* Nudge up: uppercase text has no descenders, so its ink sits above the line-box center. */
	margin-top: -3px;
	width: 8px;
}

/* Resource loop status bar
--------------------------------------------- */

/* What narrows the list, one labelled group after another, wrapping as needed.
   Aligned on the baseline, so a label's text sits level with its chips' text
   rather than their boxes being centred. */
.gtt-resource-loop__terms {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
}

.gtt-resource-loop__term-group {
	align-items: baseline;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
}

.gtt-resource-loop__term-label {
	font-weight: var(--wp--custom--font-weight--bold);
}

/*
 * Each term is a chip in the brand green; the ones a visitor applied carry a
 * cross and take it away again.
 *
 * Founders Grotesk's metrics put far more room under the baseline than over the
 * cap height: in a plain line box the text sits 5.4px from the chip's top and
 * 15.2px from its bottom at 20px. text-box trims the box to the cap height and
 * baseline, so even padding centres the letters themselves; it needs a block
 * container, hence inline-block. Where it is not supported, the padding is
 * shifted to the top by the measured difference instead. Both keep the chip at
 * the same height.
 */
.gtt-resource-loop__term {
	background-color: var(--wp--preset--color--emerald-trn);
	border: 1px solid var(--wp--preset--color--emerald);
	border-radius: 999px;
	color: var(--wp--preset--color--shark);
	display: inline-block;
	line-height: var(--wp--custom--line-height--tight);
	padding: 0.5em var(--wp--preset--spacing--12) 0;
}

@supports (text-box: trim-both cap alphabetic) {
	.gtt-resource-loop__term {
		padding-block: 0.5em;
		text-box: trim-both cap alphabetic;
	}
}

a.gtt-resource-loop__term {
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/*
 * The remove control: a dark disc with a cross cut out of it, so it reads as a
 * control of its own against the chip in either state. The shape is a mask and
 * the colour a token, so it follows the palette.
 *
 * Smaller than the text, so it reads as an action rather than a letter, and
 * centred on the capitals, where the chip's text is centred: the disc is 0.75em
 * and Founders Grotesk's cap height 0.65em, so it is lowered by half the
 * difference from the baseline. The chip's closing padding is halved to keep
 * the disc as far from the edge as the text is from the other one.
 *
 * Without text-box the disc, deeper than the capitals, deepens the line, and a
 * little more of the fallback padding moves below it to match.
 */
a.gtt-resource-loop__term {
	padding-inline-end: var(--wp--preset--spacing--8);
}

@supports not (text-box: trim-both cap alphabetic) {
	a.gtt-resource-loop__term {
		padding-block: 0.45em 0.05em;
	}
}

a.gtt-resource-loop__term::after {
	background-color: var(--wp--preset--color--shark);
	content: "";
	display: inline-block;
	height: 0.75em;
	margin-inline-start: var(--wp--preset--spacing--8);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff'/%3E%3Cpath d='M5.5 5.5l5 5m0-5l-5 5' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/mask%3E%3Crect width='16' height='16' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
	vertical-align: -0.05em;
	width: 0.75em;
}

a.gtt-resource-loop__term:hover,
a.gtt-resource-loop__term:focus-visible {
	background-color: var(--wp--preset--color--emerald);
	color: var(--wp--preset--color--shark);
}