.mf-tag {
	display: inline-block;
	padding: 0 var(--mf-space-2);
	border: var(--mf-border);
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-tiny);
	line-height: calc(var(--mf-font-line-height-tight) * 1.4);
	letter-spacing: var(--mf-track-caption);
	text-transform: uppercase;
	white-space: nowrap;

	&[data-mf-tone="ok"] {
		border-color: var(--mf-color-success);
		color: var(--mf-color-success);
	}

	&[data-mf-tone="warn"] {
		border-color: var(--mf-color-border-strong);
		color: var(--mf-color-accent);
	}

	&[data-mf-tone="danger"] {
		border-color: var(--mf-color-danger);
		color: var(--mf-color-danger);
	}

	/* No border: a dim tag states something, it does not flag it. */
	&[data-mf-tone="dim"] {
		border-color: transparent;
	}
}