/**
 * Sistema global de insignias y estados.
 *
 * @package Groowleck
 */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--groowleck-space-1);
	width: fit-content;
	min-height: 1.75rem;
	padding: var(--groowleck-space-1) var(--groowleck-space-3);
	border-radius: var(--groowleck-radius-pill);
	background: var(--groowleck-color-surface-strong);
	color: var(--groowleck-color-text-body);
	font-size: var(--groowleck-font-size-xs);
	font-weight: var(--groowleck-font-weight-semibold);
	line-height: 1;
	letter-spacing: var(--groowleck-letter-spacing-wide);
	text-transform: uppercase;
}

.badge--free {
	background: color-mix(in srgb, var(--groowleck-status-free) 12%, white);
	color: var(--groowleck-status-free);
}

.badge--premium {
	background: color-mix(in srgb, var(--groowleck-status-premium) 12%, white);
	color: var(--groowleck-status-premium);
}

.badge--success {
	background: color-mix(in srgb, var(--groowleck-status-success) 12%, white);
	color: var(--groowleck-status-success);
}

.badge--warning {
	background: color-mix(in srgb, var(--groowleck-status-warning) 14%, white);
	color: #8a4b00;
}

.badge--danger {
	background: color-mix(in srgb, var(--groowleck-status-danger) 12%, white);
	color: var(--groowleck-status-danger);
}

.badge--info {
	background: color-mix(in srgb, var(--groowleck-status-info) 12%, white);
	color: var(--groowleck-status-info);
}

.badge--neutral {
	background: var(--groowleck-color-surface-strong);
	color: var(--groowleck-status-neutral);
}

.status-dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}