/**
 * Elcogen Category Label Widget Styles
 *
 * Styles for category badge labels displayed on single posts.
 * Design: Figma node 38807:56753
 * Component: Tag (Category Label) with Blue/Green variants and Desktop/Mobile sizes
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* Wrapper */
.elcogen-category-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-baseline-08);
}

/* Badge - Base Styles */
.elcogen-category-label__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* Typography - Base */
	font-family: var(--font-family-body, 'Afacad', sans-serif) !important;
	font-weight: var(--font-weight-regular) !important;
	letter-spacing: 0 !important;

	/* Layout - Exact Figma specifications */
	padding: 0 var(--spacing-baseline-16) !important;
	border-radius: var(--radius-pill) !important;

	/* Display */
	white-space: nowrap !important;
	text-transform: none !important;
	transition: var(--transition-all);
}

/* ============================================
   Color Variants
   ============================================ */

/* Blue variant (default) */
.elcogen-category-label__badge--blue {
	background-color: var(--color-light-blue-300) !important;
	color: var(--color-text-primary) !important;
}

/* Green variant */
.elcogen-category-label__badge--green {
	background-color: var(--color-green-green-400, #8effa6) !important;
	color: var(--color-text-primary) !important;
}

/* ============================================
   Size Variants
   ============================================ */

/* Desktop size - Uses Body/Large typography */
.elcogen-category-label__badge--desktop {
	font-size: var(--font-size-body-large) !important;
	line-height: var(--line-height-body-large) !important;
}

/* Mobile size - Uses Body/Medium typography */
.elcogen-category-label__badge--mobile {
	font-size: var(--font-size-body-medium) !important;
	line-height: var(--line-height-body-medium) !important;
}

/* Fallback text (when no categories) */
.elcogen-category-label__fallback {
	display: inline-block;
	color: var(--color-neutral-300);
	font-size: var(--font-size-body-large);
	font-style: italic;
}