/* ==============================================
   BADGES COMPONENT
   Applied to small status indicators, tags, or types.
   ============================================== */

.app-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 12px;
	font-size: 0.85rem;
	border-radius: 20px;
	white-space: nowrap;
	user-select: none;
	border: 1px solid color-mix(in srgb, var(--neon-primary) 15%, transparent);
	backdrop-filter: blur(10px);
}

.app-badge-small {
	padding: 4px 8px;
	font-size: 0.70rem;
    line-height: 1;
}

/* Primary Neon Variant */
.app-badge-primary {
    border: 1px solid color-mix(in srgb, var(--neon-primary) 20%, transparent);
    color: var(--neon-primary);
    background: color-mix(in srgb, var(--neon-primary) 10%, transparent);
}

/* Accent Variant */
.app-badge-accent {
    border: 1px solid color-mix(in srgb, var(--neon-accent) 20%, transparent);
    color: var(--neon-accent);
    background: color-mix(in srgb, var(--neon-accent) 10%, transparent);
}

/* Glassy / Neutral Variant */
.app-badge-glass {
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    background: var(--bg-input);
}

/* Large variant (used in File Metadata) */
.app-badge-lg {
    padding: 6px 14px;
    font-size: 0.85rem;
}