/* ==========================================================================
   Badge
   Converted from design-reference/showroom-floor.css §7.
   Saddle is reserved for provenance and collection tags — nothing else.
   ========================================================================== */

.tfs-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--step--8);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	padding: var(--wp--custom--step--8) var(--wp--custom--step--12);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/*
 * The border keeps `saddle` and the label takes `saddle-text`. They are the
 * same hue at two lightnesses, and the split is the point: a 1px rule is a
 * decorative mark held to 3:1, which `saddle` clears at 3.68:1 on this badge's
 * `surface` ground, while the 12px label is text held to 4.5:1, which it does
 * not. The darkened value is 4.81:1. The two read as one colour at this size.
 */
.tfs-badge--made-here {
	border-color: var(--wp--preset--color--saddle);
	color: var(--wp--preset--color--saddle-text);
}

/* The dot is a non-text mark, so it keeps the decorative value. */
.tfs-badge--made-here::before {
	content: "";
	width: var(--wp--custom--control--dot-small);
	height: var(--wp--custom--control--dot-small);
	flex: 0 0 var(--wp--custom--control--dot-small);
	background-color: var(--wp--preset--color--saddle);
}