/**
 * Component: badges and availability states
 *
 * Six availability states, each visually distinct. With roughly 72% of this
 * catalogue out of stock at any moment, "can I buy this" is the highest-value
 * question a card answers - six shades of grey would not do the job.
 *
 * Colour is never the only signal: each state has its own wording, and the
 * dot differs in fill.
 */

/* ---------------------------------------------------------------------- */
/* Availability                                                            */
/* ---------------------------------------------------------------------- */

.tcs-availability {
	display: inline-flex;
	align-items: center;
	gap: var(--tcs-space-2xs);
	font-family: var(--tcs-font-sans);
	font-size: var(--tcs-text-2xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: 0.02em;
	line-height: var(--tcs-leading-snug);
	padding: 0.2em 0.5em;
	border-radius: var(--tcs-radius-sm);
	white-space: nowrap;
	max-width: 100%;
}

.tcs-availability__dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: var(--tcs-radius-pill);
	background: currentColor;
	flex-shrink: 0;
}

/* Full variant - product pages. Wraps, larger, no chip background. */
.tcs-availability--full {
	font-size: var(--tcs-text-sm);
	padding: 0;
	background: none !important;
	white-space: normal;
	margin: 0;
	max-width: var(--tcs-measure);
}

/* States ------------------------------------------------------------- */

.tcs-availability--instock {
	color: var(--tcs-state-instock);
	background: var(--tcs-state-instock-bg);
}

.tcs-availability--low {
	color: var(--tcs-state-low);
	background: var(--tcs-state-low-bg);
}

.tcs-availability--preorder {
	color: var(--tcs-state-preorder);
	background: var(--tcs-state-preorder-bg);
}

.tcs-availability--backorder {
	color: var(--tcs-state-backorder);
	background: var(--tcs-state-backorder-bg);
}

.tcs-availability--comingsoon {
	color: var(--tcs-state-comingsoon);
	background: var(--tcs-state-comingsoon-bg);
}

.tcs-availability--soldout {
	color: var(--tcs-state-soldout);
	background: var(--tcs-state-soldout-bg);
}

/* Hollow dot distinguishes sold out without relying on hue. */
.tcs-availability--soldout .tcs-availability__dot {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

/*
 * Coming soon is announced but not orderable: a half-filled dot, distinct
 * from pre-order's ring and sold out's hollow outline. The three unavailable
 * or not-yet states must be separable without relying on hue.
 */
.tcs-availability--comingsoon .tcs-availability__dot {
	background: linear-gradient(to right, currentColor 50%, transparent 50%);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Pre-order reads as pending: a ring with a centre. */
.tcs-availability--preorder .tcs-availability__dot {
	background: transparent;
	box-shadow:
		inset 0 0 0 1.5px currentColor,
		inset 0 0 0 3px var(--tcs-state-preorder-bg);
}

.tcs-availability__note {
	font-size: var(--tcs-text-xs);
	color: var(--tcs-ink-muted);
	margin-top: var(--tcs-space-2xs);
	max-width: var(--tcs-measure);
}

/* ---------------------------------------------------------------------- */
/* Badges - overlaid on product imagery                                    */
/* ---------------------------------------------------------------------- */

.tcs-badge {
	position: absolute;
	inset-block-start: var(--tcs-space-xs);
	inset-inline-start: var(--tcs-space-xs);
	z-index: calc(var(--tcs-z-base) + 1);
	font-family: var(--tcs-font-sans);
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
	padding: 0.25em 0.5em;
	border-radius: var(--tcs-radius-sm);
	background: var(--tcs-ink);
	color: var(--tcs-ink-inverse);
}

.tcs-badge--sale {
	background: var(--tcs-sale);
}

.tcs-badge--new {
	background: var(--tcs-accent);
}

/* ---------------------------------------------------------------------- */
/* Metal tag - small typographic label, used in specs and filters          */
/* ---------------------------------------------------------------------- */

.tcs-metal-tag {
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-semibold);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
}

.tcs-metal-tag--gold     { color: var(--tcs-metal-gold); }
.tcs-metal-tag--silver   { color: var(--tcs-metal-silver); }
.tcs-metal-tag--platinum { color: var(--tcs-metal-platinum); }
.tcs-metal-tag--copper   { color: var(--tcs-metal-copper); }

/* ---------------------------------------------------------------------- */
/* Forced colours                                                          */
/* ---------------------------------------------------------------------- */

@media (forced-colors: active) {
	.tcs-availability {
		border: 1px solid CanvasText;
	}
	.tcs-badge {
		border: 1px solid CanvasText;
	}
}