/* Badges (docs/DESIGN_SYSTEM.md section 8.2): level, type and funding labels. Rendered only when the value exists. */
@layer components {
	.badge {
		display: inline-flex;
		align-items: center;
		padding: var(--space-1) var(--space-3);
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		background: var(--color-surface-tint-2);
		color: var(--color-primary);
		font-size: var(--fs-caption);
		font-weight: 600;
		line-height: var(--lh-caption);
	}

	/* Outline variant for funding and course type tags. */
	.badge--outline {
		border-color: var(--color-line-strong);
		background: transparent;
		color: var(--color-text-secondary);
	}

	/* Marks prototype content that has not been replaced (docs/CONTENT_REQUIREMENTS.md section 1). */
	.badge--placeholder {
		background: var(--color-warning);
		color: var(--color-text-inverse);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
	}

	@media (forced-colors: active) {
		.badge {
			border-color: CanvasText;
		}
	}
}