/**
 * Badge Components
 * Status badges, tags, and notification counters
 * Implements specifications from TECHTRONIC_DESIGN_SYSTEM.md Section 7.6
 *
 * @package Techtronic_Learning
 * @since 1.0.0
 */

/* ==========================================================================
   Base Badge Styles
   ========================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	padding: 4px 12px;
	border-radius: 12px;

	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.4;

	vertical-align: middle;
	white-space: nowrap;
}

/* ==========================================================================
   Semantic Badge Variants
   ========================================================================== */

.badge--success {
	background: var(--success-200);
	color: var(--success-900);
}

.badge--warning {
	background: var(--warning-200);
	color: var(--warning-900);
}

.badge--error {
	background: var(--error-200);
	color: var(--error-900);
}

.badge--info {
	background: var(--info-200);
	color: var(--info-900);
}

.badge--neutral {
	background: var(--gray-200);
	color: var(--gray-900);
}

/* ==========================================================================
   Badge with Icon
   ========================================================================== */

.badge svg,
.badge img {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

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

.badge--small {
	padding: 2px 8px;
	font-size: 10px;
	border-radius: 8px;
}

.badge--small svg,
.badge--small img {
	width: 12px;
	height: 12px;
}

.badge--large {
	padding: 6px 16px;
	font-size: 14px;
	border-radius: 14px;
}

.badge--large svg,
.badge--large img {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Count Badge (Notification)
   ========================================================================== */

.badge-count {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: var(--error-600);
	color: #ffffff;
	border-radius: 10px;

	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;

	white-space: nowrap;
}

/* Count badge sizes */
.badge-count--small {
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 10px;
	border-radius: 8px;
}

.badge-count--large {
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	font-size: 12px;
	border-radius: 12px;
}

/* ==========================================================================
   Positioned Badge (Absolute)
   ========================================================================== */

.badge-count--absolute {
	position: absolute;
	top: -8px;
	right: -8px;
	z-index: 10;
}

.badge-count--absolute-small {
	top: -6px;
	right: -6px;
}

.badge-count--absolute-large {
	top: -10px;
	right: -10px;
}

/* ==========================================================================
   Badge Container (For Relative Positioning)
   ========================================================================== */

.badge-container {
	position: relative;
	display: inline-block;
}

/* ==========================================================================
   Dot Badge (Simple Indicator)
   ========================================================================== */

.badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--error-600);
	display: inline-block;
	flex-shrink: 0;
}

.badge-dot--success {
	background: var(--success-600);
}

.badge-dot--warning {
	background: var(--warning-600);
}

.badge-dot--info {
	background: var(--info-600);
}

.badge-dot--neutral {
	background: var(--gray-500);
}

/* Dot sizes */
.badge-dot--small {
	width: 6px;
	height: 6px;
}

.badge-dot--large {
	width: 10px;
	height: 10px;
}

/* Animated pulsing dot */
.badge-dot--pulse {
	animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badge-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

/* ==========================================================================
   Course Tier Badges (Special Use Case)
   ========================================================================== */

.badge--tier {
	padding: 6px 16px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.badge--tier-beginner {
	background: rgba(77, 208, 225, 0.9); /* Teal 400 */
	color: #ffffff;
}

.badge--tier-intermediate {
	background: rgba(0, 172, 193, 0.9); /* Teal 600 */
	color: #ffffff;
}

.badge--tier-advanced {
	background: rgba(255, 122, 67, 0.9); /* Orange 500 */
	color: #ffffff;
}

.badge--tier-professional {
	background: rgba(255, 213, 79, 0.9); /* Yellow 500 */
	color: #0a0e14; /* Dark text on bright yellow */
}

/* ==========================================================================
   Status Badges (For Dashboard/Admin)
   ========================================================================== */

.badge--active {
	background: var(--success-200);
	color: var(--success-900);
}

.badge--inactive {
	background: var(--gray-200);
	color: var(--gray-700);
}

.badge--pending {
	background: var(--warning-200);
	color: var(--warning-900);
}

.badge--cancelled {
	background: var(--error-200);
	color: var(--error-900);
}

.badge--completed {
	background: var(--success-200);
	color: var(--success-900);
}

/* ==========================================================================
   Outline Badge Variants
   ========================================================================== */

.badge--outline {
	background: transparent;
	border: 1px solid currentColor;
}

.badge--outline-success {
	color: var(--success-600);
	border-color: var(--success-600);
}

.badge--outline-warning {
	color: var(--warning-600);
	border-color: var(--warning-600);
}

.badge--outline-error {
	color: var(--error-600);
	border-color: var(--error-600);
}

.badge--outline-info {
	color: var(--info-600);
	border-color: var(--info-600);
}

.badge--outline-neutral {
	color: var(--gray-500);
	border-color: var(--gray-500);
}

/* ==========================================================================
   Removable Badge (With Close Button)
   ========================================================================== */

.badge--removable {
	padding-right: 8px;
}

.badge__remove {
	width: 16px;
	height: 16px;
	padding: 0;
	margin-left: 4px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	border: none;
	border-radius: 50%;
	color: currentColor;
	cursor: pointer;

	opacity: 0.7;
	transition: all 0.2s ease;
}

.badge__remove:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.1);
}

.badge__remove svg {
	width: 12px;
	height: 12px;
}

/* ==========================================================================
   Badge in Button
   ========================================================================== */

.btn-with-badge {
	position: relative;
}

.btn-with-badge .badge-count {
	position: absolute;
	top: -8px;
	right: -8px;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
	.badge {
		font-size: 11px;
		padding: 3px 10px;
	}

	.badge--large {
		font-size: 12px;
		padding: 5px 14px;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.badge {
		border: 1px solid currentColor;
		background: transparent !important;
	}

	.badge-count {
		display: inline-block;
	}

	.badge-dot {
		border: 1px solid currentColor;
		background: transparent !important;
	}
}