/* EventScope badges. Colors inherit from the theme unless a badge defines its own. */
.eventscope-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eventscope-badges > li {
	margin: 0;
	padding: 0;
}

.eventscope-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.7em;
	border: 1px solid transparent;
	border-radius: var(--es-badge-radius, 999px);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--es-badge-color, inherit);
}

.eventscope-badge--soft {
	background: var(--es-badge-bg, color-mix(in srgb, currentColor 12%, transparent));
	border-color: var(--es-badge-border, transparent);
}

.eventscope-badge--filled {
	background: var(--es-badge-bg, CanvasText);
	border-color: var(--es-badge-border, transparent);
	color: var(--es-badge-color, Canvas);
}

.eventscope-badge--outline {
	background: var(--es-badge-bg, transparent);
	border-color: var(--es-badge-border, currentColor);
}

.eventscope-badge--sm {
	font-size: 0.75rem;
}

.eventscope-badge--lg {
	font-size: 0.9375rem;
}

.eventscope-badge .eventscope-icon {
	flex: none;
	width: 1em;
	height: 1em;
}