@import url("variables.css");

/* --- SUBSCRIPTION STATUS BADGES --- */
.flexi-subscription-status {
	display: inline-block;
	padding: 3px 8px;
	border-radius: var(--flexi-subs-radius);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1;
}

/* Active */
.flexi-status-active {
	background-color: var(--flexi-subs-success-bg);
	color: var(--flexi-subs-success);
	border: 1px solid var(--flexi-subs-success-border);
}

/* Pending */
.flexi-status-pending {
	background-color: var(--flexi-subs-warning-bg);
	color: var(--flexi-subs-warning);
	border: 1px solid var(--flexi-subs-warning-border);
}

/* Cancelled */
.flexi-status-cancelled {
	background-color: var(--flexi-subs-error-bg);
	color: var(--flexi-subs-error);
	border: 1px solid var(--flexi-subs-error-border);
}

/* Expired */
.flexi-status-expired {
	background-color: #f1f5f9;
	color: var(--flexi-subs-text-muted);
	border: 1px solid var(--flexi-subs-border);
}

/* On Hold */
.flexi-status-on-hold {
	background-color: var(--flexi-subs-info-bg);
	color: var(--flexi-subs-info);
	border: 1px solid var(--flexi-subs-info-border);
}

/* --- NEXT PAYMENT STATES --- */
.flexi-next-payment.overdue {
	color: var(--flexi-subs-error);
	font-weight: 600;
}

.flexi-next-payment.upcoming {
	color: var(--flexi-subs-warning);
	font-weight: 600;
}

.flexi-order-label {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	margin: 10px 0;
	color: #fff;
	padding: 8px 12px;
	background: var(--flexi-subs-primary);
	border-radius: var(--flexi-subs-3);
}