/* ==========================================================================
   Availability indicator
   Converted from design-reference/showroom-floor.css §7.
   Filled dot = on the floor today. Hollow dot = ask about it.
   ========================================================================== */

.tfs-avail {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--step--12);
	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;
	color: var(--wp--preset--color--muted);
}

/* A round status dot, not a panel — the 2px radius ceiling governs boxes. */
.tfs-avail::before {
	content: "";
	width: var(--wp--custom--control--dot);
	height: var(--wp--custom--control--dot);
	flex: 0 0 var(--wp--custom--control--dot);
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: transparent;
}

.tfs-avail--on-floor {
	color: var(--wp--preset--color--ink);
}

.tfs-avail--on-floor::before {
	background-color: currentColor;
}