/* =========================================================
   BADGES CSS
   assets/css/components/badges.css
   ========================================================= */

/* =========================================================
   BASE BADGE
   ========================================================= */

.vb-badge,
.vb-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	min-height: 28px;
	padding: 0 10px;

	border: 1px solid transparent;
	border-radius: var(--vb-radius-pill);

	font-size: 12px;
	font-weight: var(--vb-weight-bold);
	line-height: 1;
	white-space: nowrap;

	text-decoration: none !important;
}

/* =========================================================
   PRIMARY
   ========================================================= */

.vb-badge-primary {
	background: var(--vb-action-soft);
	color: var(--vb-action-active);

	border-color: var(--vb-info-border);
}

/* =========================================================
   SUCCESS
   ========================================================= */

.vb-badge-success {
	background: var(--vb-success-soft);
	color: var(--vb-success);

	border-color: var(--vb-success-border);
}

/* =========================================================
   WARNING
   ========================================================= */

.vb-badge-warning {
	background: var(--vb-warning-soft);
	color: var(--vb-warning);

	border-color: var(--vb-warning-border);
}

/* =========================================================
   INFO
   ========================================================= */

.vb-badge-info {
	background: var(--vb-info-soft);
	color: var(--vb-info);

	border-color: var(--vb-info-border);
}

/* =========================================================
   NEUTRAL
   ========================================================= */

.vb-badge-neutral {
	background: var(--vb-neutral-soft);
	color: var(--vb-neutral);

	border-color: var(--vb-border);
}

/* =========================================================
   WHATSAPP
   ========================================================= */

.vb-badge-whatsapp {
	background: var(--vb-whatsapp-soft);
	color: var(--vb-whatsapp);

	border-color: var(--vb-whatsapp-border);
}

/* =========================================================
   OUTLINE
   ========================================================= */

.vb-badge-outline {
	background: transparent;
	color: var(--vb-text-soft);

	border-color: var(--vb-border-strong);
}

/* =========================================================
   SMALL
   ========================================================= */

.vb-badge-sm {
	min-height: 22px;
	padding: 0 8px;

	font-size: 11px;
}

/* =========================================================
   LARGE
   ========================================================= */

.vb-badge-lg {
	min-height: 34px;
	padding: 0 14px;

	font-size: 13px;
}

/* =========================================================
   ICONS
   ========================================================= */

.vb-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 14px;
	height: 14px;

	flex: 0 0 auto;
}

.vb-badge-icon svg {
	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;

	stroke-linecap: round;
	stroke-linejoin: round;
}