/* ========================================
   @conduction/nextcloud-vue — Status Badge
   ======================================== */

.cn-status-badge {
	display: inline-flex;
	align-items: center;
	gap: calc(0.5 * var(--default-grid-baseline));
	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
	border-radius: var(--border-radius-pill);
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

/* Size variants */
.cn-status-badge--small {
	padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
	font-size: 0.75em;
}

/* Color variants */
.cn-status-badge--default {
	background-color: var(--color-background-dark);
	color: var(--color-main-text);
}

.cn-status-badge--primary {
	background-color: var(--color-primary-element-light);
	color: var(--color-primary-element);
}

.cn-status-badge--success {
	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
	color: var(--color-success-text, var(--color-success));
}

.cn-status-badge--warning {
	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
	color: var(--color-warning-text, var(--color-warning));
}

.cn-status-badge--error {
	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
	color: var(--color-error-text, var(--color-error));
}

.cn-status-badge--info {
	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
	color: var(--color-info-text, var(--color-info, #0082c9));
}

/* Solid variants — solid background with white text for use on colored backgrounds */
.cn-status-badge--solid.cn-status-badge--default {
	background-color: var(--color-background-dark);
	color: var(--color-main-text);
}

.cn-status-badge--solid.cn-status-badge--primary {
	background-color: var(--color-primary-element);
	color: white;
}

.cn-status-badge--solid.cn-status-badge--success {
	background-color: var(--color-success);
	color: white;
}

.cn-status-badge--solid.cn-status-badge--warning {
	background-color: var(--color-warning);
	color: var(--color-primary-text);
}

.cn-status-badge--solid.cn-status-badge--error {
	background-color: var(--color-error);
	color: white;
}

.cn-status-badge--solid.cn-status-badge--info {
	background-color: var(--color-info, #0082c9);
	color: white;
}