/**
 * _Badges
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/shared/_badges.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 *
 * Architecture
 * ------------
 * Every badge gets the `.wsscd-badge` base class. Variants are color-only
 * modifiers. `WSSCD_Badge_Helper` always applies the base class.
 *
 * Variant families:
 *   .wsscd-badge--{success|warning|danger|info|neutral} — semantic palette
 *   .wsscd-badge-status--{active|inactive|scheduled|expired|draft|paused}
 *   .wsscd-badge-health--{healthy|warning|alert|info}
 *   .wsscd-badge-product[--empty]                       — product chips
 *   .wsscd-pro-badge / .wsscd-free-badge                — tier badges
 *
 * Status/health variants are aliased to the matching semantic palette below
 * to avoid duplicate color declarations.
 */

/* ==========================================================================
   Base
   ========================================================================== */

.wsscd-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-xs);
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-md);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-medium);
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
	border-radius: var(--wsscd-radius-md);
	transition: var(--wsscd-transition-all);
}

/* ==========================================================================
   Sizes
   ========================================================================== */

.wsscd-badge--sm {
	padding: 2px var(--wsscd-spacing-sm);
	gap: var(--wsscd-spacing-xxs);
}

/* ==========================================================================
   Color Palettes — semantic + aliased status/health variants
   ========================================================================== */

.wsscd-badge--success,
.wsscd-badge-status--active,
.wsscd-badge-health--healthy {
	background: var(--wsscd-color-success-lighter);
	color: var(--wsscd-color-success);
}

.wsscd-badge--warning,
.wsscd-badge-status--draft,
.wsscd-badge-health--warning {
	background: var(--wsscd-color-warning-lighter);
	color: var(--wsscd-color-warning-dark);
}

.wsscd-badge--danger,
.wsscd-badge-status--expired,
.wsscd-badge-health--alert {
	background: var(--wsscd-color-danger-lighter);
	color: var(--wsscd-color-danger-dark);
}

.wsscd-badge--info,
.wsscd-badge-status--scheduled,
.wsscd-badge-health--info {
	background: var(--wsscd-color-info-alpha-15);
	color: var(--wsscd-color-primary);
}

.wsscd-badge--neutral,
.wsscd-badge-status--inactive,
.wsscd-badge-status--paused {
	background: var(--wsscd-color-text-alpha-15);
	color: var(--wsscd-color-text-muted);
}

/* ==========================================================================
   Product chips
   ========================================================================== */

.wsscd-badge-product {
	background-color: var(--wsscd-color-surface);
	color: var(--wsscd-color-text);
	border: 1px solid var(--wsscd-color-border);
	text-transform: none;
	cursor: help;
}

.wsscd-badge-product:hover {
	opacity: 0.85;
}

.wsscd-badge-product--empty {
	background-color: var(--wsscd-color-white);
	border-style: dashed;
	color: var(--wsscd-color-text-secondary);
	font-style: italic;
}

/* ==========================================================================
   Pro / Free
   ========================================================================== */

.wsscd-pro-badge,
.wsscd-free-badge {
	font-weight: var(--wsscd-font-weight-semibold);
	letter-spacing: 0.01em;
}

.wsscd-pro-badge {
	background: var(--wsscd-color-pro-alpha-15, rgba(124, 58, 237, 0.15));
	color: var(--wsscd-color-pro-dark, #5b21b6);
	border: 1px solid var(--wsscd-color-pro-alpha-25, rgba(124, 58, 237, 0.25));
}

.wsscd-free-badge {
	background: var(--wsscd-color-success-lighter);
	color: var(--wsscd-color-success-dark);
	border: 1px solid var(--wsscd-color-success);
}

/* ==========================================================================
   Icons inside badges
   ========================================================================== */

.wsscd-badge .wsscd-icon {
	width: 14px;
	height: 14px;
	font-size: var(--wsscd-font-size-medium);
	line-height: 1;
}