/**
 * Meridian Sections — Tag Row
 *
 * Figma 214:859. A thin strip of icon-and-label tags: the market as a blue pill,
 * then the location and a status.
 */

.md-section.md-tagrow {
	padding-block: var(--md-section-pt, 1.25rem) var(--md-section-pb, 1.3125rem); /* 20 / 21 */
	background-color: var(--md-white, #fff);
}

.md-tagrow--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/*
 * 24px apart in the comp. Wraps rather than scrolls: three tags fit a phone on
 * two lines, and a scroller would hide the status — usually the one a visitor is
 * looking for.
 */
.md-tagrow__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--md-space-xs, 0.75rem) var(--md-space-md, 1.5rem); /* 12 / 24 */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- A tag --------------------------------------------------------------- */
.md-tagrow__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem; /* 6px */
	/* 12px / 18px semibold, the comp's own values. */
	font-size: 0.75rem;
	font-weight: var(--md-weight-semibold, 600);
	line-height: 1.5;
	text-decoration: none;
}

.md-tagrow__icon {
	/* 14px, against the brand default of 48. */
	--md-icon-size: 0.875rem;
}

/*
 * The icon takes the tag's colour, so each treatment below sets one value and the
 * glyph follows — no per-tone icon rules.
 */
.md-tagrow__tag--plain {
	color: var(--md-color-text-body, #364153);
}

.md-tagrow__tag--positive {
	color: var(--md-green, #5dae71);
}

/*
 * The pill: brand blue at 8% behind blue type. colour-mix would express "the
 * brand blue, faded" without restating its channels, but support is too recent to
 * rely on here, so the rgba is written out and pinned to the token's own value.
 */
.md-tagrow__tag--pill {
	padding: 0.375rem 0.875rem; /* 6 / 14 */
	border-radius: var(--md-radius-pill, 999px);
	background-color: var(--md-tagrow-pill-bg, rgba(0, 107, 182, 0.08));
	color: var(--md-blue, #006bb6);
}

/* Only where the tag is a link is there a state to show. */
a.md-tagrow__tag:hover,
a.md-tagrow__tag:focus-visible {
	color: var(--md-blue-dark, #005893);
}

a.md-tagrow__tag--pill:hover,
a.md-tagrow__tag--pill:focus-visible {
	background-color: var(--md-tagrow-pill-bg-hover, rgba(0, 107, 182, 0.16));
}

a.md-tagrow__tag:hover .md-tagrow__label,
a.md-tagrow__tag:focus-visible .md-tagrow__label {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}