/*
Ability Esports — Badge component.
Status color mapping per /docs/DESIGN-TOKENS.md §5.5/§10 and
/docs/UI-PATTERN-LIBRARY.md §7 — color is always paired with the text label
the PHP component already renders, never used alone to communicate status.
*/

.ae-badge {
	display: inline-flex;
	align-items: center;
	height: var(--ae-badge-height);
	padding-inline: var(--ae-badge-padding-x);
	border-radius: var(--ae-badge-radius);
	font-family: var(--ae-font-body);
	font-size: var(--ae-badge-font);
	font-weight: var(--ae-weight-medium);
	letter-spacing: var(--ae-tracking-badge);
	white-space: nowrap;
}

.ae-badge--default {
	background: var(--ae-color-surface-2);
	color: var(--ae-color-text-secondary);
}

.ae-badge--live {
	background: var(--ae-color-live);
	color: var(--ae-color-text-inverse);
}

.ae-badge--upcoming {
	background: transparent;
	color: var(--ae-color-upcoming);
	border: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-upcoming);
}

.ae-badge--completed {
	background: transparent;
	color: var(--ae-color-completed);
	border: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-completed);
}

/*
Stage 6 — Component Engine: remaining Badge variants from the locked
vocabulary (/docs/UI-PATTERN-LIBRARY.md §7, /docs/DESIGN-TOKENS.md §5.5/§10)
that Stage 5 didn't yet need. No new status is invented here — every
variant below maps to an already-locked, already-documented status/category.
*/

.ae-badge--final {
	background: var(--ae-color-completed);
	color: var(--ae-color-text-inverse);
}

.ae-badge--postponed {
	background: transparent;
	color: var(--ae-color-warning);
	border: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-warning);
}

.ae-badge--cancelled {
	background: transparent;
	color: var(--ae-color-error);
	border: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-error);
}

.ae-badge--registered {
	background: transparent;
	color: var(--ae-color-success);
	border: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-success);
}

.ae-badge--registration-open {
	background: transparent;
	color: var(--ae-color-success);
	border: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-success);
}

.ae-badge--registration-closed {
	background: transparent;
	color: var(--ae-color-completed);
	border: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-completed);
}

.ae-badge--game,
.ae-badge--category {
	background: var(--ae-color-surface-2);
	color: var(--ae-color-text-secondary);
}

.ae-badge--location {
	display: inline-flex;
	align-items: center;
	gap: var(--ae-badge-gap-icon);
	background: var(--ae-color-surface-2);
	color: var(--ae-color-text-secondary);
}

.ae-badge--location svg {
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}