/*
Ability Esports — Chip and Segmented Control primitives.
/docs/UI-PATTERN-LIBRARY.md §3/§22 (Filter System). Built now as reusable
infrastructure ahead of the Filter/Search UIs that consume them once real
entity content exists (Games/Events/Teams archives, Stage 10+) — no live
call site today, same "library before consumer" pattern already used for
Button/Badge/Card in Stage 5.
*/

.ae-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ae-space-xs);
	height: 2rem;
	padding-inline: var(--ae-space-md);
	border-radius: var(--ae-radius-pill);
	border: var(--ae-border-default);
	background: transparent;
	color: var(--ae-color-text-secondary);
	font-family: var(--ae-font-body);
	font-size: var(--ae-text-body-sm);
	font-weight: var(--ae-weight-medium);
	white-space: nowrap;
	transition: background-color var(--ae-duration-fast) var(--ae-ease-standard),
		border-color var(--ae-duration-fast) var(--ae-ease-standard),
		color var(--ae-duration-fast) var(--ae-ease-standard);
}

.ae-chip:hover {
	background: var(--ae-color-interactive-hover);
	color: var(--ae-color-text-primary);
}

.ae-chip[aria-pressed="true"],
.ae-chip--selected {
	background: var(--ae-color-interactive-active);
	border-color: var(--ae-color-brand-primary);
	color: var(--ae-color-text-primary);
}

.ae-chip__remove {
	display: inline-flex;
	margin-left: var(--ae-space-xs);
	color: currentColor;
}

/* Segmented control — a small set of mutually exclusive quick options ("All / Live / Upcoming"). */
.ae-segmented {
	display: inline-flex;
	padding: var(--ae-space-xs);
	background: var(--ae-color-surface-2);
	border-radius: var(--ae-radius-pill);
	gap: var(--ae-space-xs);
}

.ae-segmented__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2rem;
	padding-inline: var(--ae-space-md);
	border-radius: var(--ae-radius-pill);
	background: transparent;
	color: var(--ae-color-text-secondary);
	font-family: var(--ae-font-body);
	font-size: var(--ae-text-body-sm);
	font-weight: var(--ae-weight-medium);
	transition: background-color var(--ae-duration-fast) var(--ae-ease-standard),
		color var(--ae-duration-fast) var(--ae-ease-standard);
}

.ae-segmented__option:hover {
	color: var(--ae-color-text-primary);
}

.ae-segmented__option[aria-pressed="true"] {
	background: var(--ae-color-surface-3);
	color: var(--ae-color-text-primary);
}