/*
 * A mention: a person's name as a small pill inside a sentence, linking to their author
 * page, with their photo in front when the site has one of its own.
 *
 * It sits in running text, so it keeps the sentence's size and baseline rather than
 * shrinking to a label the way a status pill does — a name is part of what is being
 * said. The colours are the suite's neutral tokens with fallbacks, so it follows the
 * theme like every uncoloured element here.
 */

/*
 * An inline-BLOCK, not an inline-flex, and that is the fix for "the pill sits too high"
 * (divb-hq#200). A flex container takes its baseline from its FIRST item, and the first
 * item is the photo: an image has no text baseline, so its bottom edge was put on the
 * line's baseline and the name rode 5.2px above the words around it. An inline-block's
 * baseline is its last line of text — the name — so the name sits on the sentence's line.
 * Measured on /fancy-shmancy/: baseline offset 0, and the paragraph keeps its height.
 */
.mf-mention {
	display: inline-block;
	padding: 1px 9px;
	font-weight: 600;

	/* Below the paragraph's own line height, so a pill never spreads its line. */
	line-height: 1.25;
	color: var(--mf-ink, #1a1a2e);
	text-decoration: none;

	/* A name broken across two lines reads as two names. */
	white-space: nowrap;
	vertical-align: baseline;
	background: var(--mf-surface-2, #eef1f5);
	border-radius: 999px;
}

.mf-mention--photo {
	padding-left: 2px;
}

.mf-mention__photo {
	width: 1.35em;
	height: 1.35em;
	margin-right: 5px;
	object-fit: cover;

	/*
	 * Centred on the name rather than on `middle`, which centres on the x-height and put the
	 * photo 1.7px low. -0.3em is the measured value: photo centre to name centre 0.05px.
	 */
	vertical-align: -0.3em;
	border-radius: 50%;
}

.mf-mention:hover .mf-mention__name,
.mf-mention:focus-visible .mf-mention__name {
	text-decoration: underline;
}