/*
 * Simple Live Auction: the one badge/state-pill palette. Shared by admin (list columns, results,
 * bidders, the auction-lots meta box, the lot editor live box, host view) and the front-end lot
 * cards/detail. Depends on tokens.css for its colours.
 *
 * Base pill + one modifier per state; group a state under the colour that matches its meaning:
 *   open, leading, valid, paid, verified   -> ok (good standing)
 *   closing, won, unpaid                   -> warn (needs attention soon)
 *   closed, unsold, outbid                 -> neutral
 *   blocked, removed                       -> danger
 *   offered                                -> info (offered to the next bidder)
 *   sold                                   -> the auction's accent colour
 */

:where(.slauction-badge) {
	display: inline-block;
	padding: var(--slauction-badge-padding);
	border-radius: var(--slauction-badge-radius);
	font-size: var(--slauction-badge-size);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	background: var(--slauction-badge-neutral-bg);
	color: var(--slauction-badge-neutral-fg);
}

:where(.slauction-badge--open),
:where(.slauction-badge--leading),
:where(.slauction-badge--valid),
:where(.slauction-badge--paid),
:where(.slauction-badge--verified) {
	background: var(--slauction-badge-open-bg);
	color: var(--slauction-badge-open-fg);
}

:where(.slauction-badge--closing),
:where(.slauction-badge--won),
:where(.slauction-badge--unpaid) {
	background: var(--slauction-badge-warn-bg);
	color: var(--slauction-badge-warn-fg);
}

:where(.slauction-badge--closed),
:where(.slauction-badge--unsold),
:where(.slauction-badge--outbid) {
	background: var(--slauction-badge-neutral-bg);
	color: var(--slauction-badge-neutral-fg);
}

:where(.slauction-badge--blocked),
:where(.slauction-badge--removed) {
	background: var(--slauction-badge-danger-bg);
	color: var(--slauction-badge-danger-fg);
}

:where(.slauction-badge--offered) {
	background: var(--slauction-badge-info-bg);
	color: var(--slauction-badge-info-fg);
}

:where(.slauction-badge--sold) {
	background: var(--slauction-accent);
	color: var(--slauction-accent-text);
}