/*
 * The pill: a small coloured label that sits inside a sentence.
 *
 * The three colours are computed on the server and arrive as custom properties, so this
 * file never mixes or darkens anything — it only places them. That split is the point:
 * CSS can mix a colour but cannot check the result against a contrast threshold, and the
 * one function that can (`contrast-color()`) is too young to be the only path. See
 * includes/class-mf-suite-pill.php.
 *
 * With no colour chosen the fallbacks take over and the pill follows the theme, which is
 * what every uncoloured element in the suite does.
 */

.mf-pill {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 4px 8px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mf-pill-ink, var(--mf-ink, #1a1a2e));

	/* Never `inherit`: a pill in a heading would take the heading's size with it. */
	white-space: nowrap;
	vertical-align: baseline;
	background: var(--mf-pill-field, var(--mf-surface-2, #f7f8fa));
	border-radius: 999px;
}

/*
 * The Böppel. Generated content rather than an element, so it stays out of the
 * accessibility tree — it repeats the colour, and a colour is not information a screen
 * reader can use. The name beside it is the information.
 */
.mf-pill::before {
	flex: none;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--mf-pill-dot, currentcolor);
	border-radius: 50%;
}