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

.wc-badge {

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;

	padding: .35rem .75rem;

	border: 1px solid transparent;
	border-radius: 999px;

	font-size: .75rem;
	font-weight: 600;
	line-height: 1;

	white-space: nowrap;

	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease;

}

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

.wc-badge--sm {

	padding: .25rem .55rem;

	font-size: .70rem;

}

.wc-badge--lg {

	padding: .5rem .9rem;

	font-size: .82rem;

}

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

.wc-badge--primary {

	background: rgba(184, 144, 91, .12);
	color: var(--wc-color-primary);

}

.wc-badge--success {

	background: rgba(22, 163, 74, .12);
	color: var(--wc-color-success);

}

.wc-badge--warning {

	background: rgba(245, 158, 11, .14);
	color: var(--wc-color-warning);

}

.wc-badge--danger {

	background: rgba(220, 38, 38, .12);
	color: var(--wc-color-danger);

}

.wc-badge--info {

	background: rgba(37, 99, 235, .12);
	color: var(--wc-color-info);

}

.wc-badge--neutral {

	background: #F3F4F6;
	color: var(--wc-color-text-light);

}

/* ==========================================================================
   Booking Status
   ========================================================================== */

.wc-badge--pending {

	background: rgba(245,158,11,.14);
	color: var(--wc-color-warning);

}

.wc-badge--confirmed {

	background: rgba(22,163,74,.12);
	color: var(--wc-color-success);

}

.wc-badge--completed {

	background: rgba(37,99,235,.12);
	color: var(--wc-color-info);

}

.wc-badge--cancelled {

	background: rgba(220,38,38,.12);
	color: var(--wc-color-danger);

}

/* ==========================================================================
   Outline
   ========================================================================== */

.wc-badge--outline {

	background: transparent;

	border: 1px solid var(--wc-color-border);

	color: var(--wc-color-text);

}

/* ==========================================================================
   Dot
   ========================================================================== */

.wc-badge__dot {

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: currentColor;

	flex-shrink: 0;

}