/* تعداد فروش اسکیل — نمایش سمت کاربر */

.sssc-count {
	--sssc-accent: #4e23df;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0 1em;
	font-size: 0.92em;
	line-height: 1.6;
	color: var(--sssc-accent);
	vertical-align: middle;
}

.sssc-count__icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	opacity: 0.85;
}

.sssc-count__number {
	font-weight: 700;
}

/* متن ساده */
.sssc-count--plain {
	color: inherit;
	opacity: 0.85;
}

.sssc-count--plain .sssc-count__number {
	color: var(--sssc-accent);
}

/* برچسب رنگی */
.sssc-count--badge {
	padding: 0.35em 0.8em;
	border-radius: 999px;
	/* از خود رنگ ساخته می‌شود تا با هر رنگی هماهنگ بماند */
	background: color-mix(in srgb, var(--sssc-accent) 12%, transparent);
	color: var(--sssc-accent);
}

/* کادر برجسته */
.sssc-count--box {
	display: flex;
	padding: 0.7em 0.9em;
	border: 1px solid color-mix(in srgb, var(--sssc-accent) 30%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--sssc-accent) 7%, transparent);
	color: var(--sssc-accent);
}

/* در آرشیو فروشگاه جا تنگ است */
.sssc-count--loop {
	margin: 0.3em 0 0.6em;
	font-size: 0.82em;
}

.sssc-count--loop.sssc-count--box {
	padding: 0.45em 0.7em;
}

/* color-mix در مرورگرهای قدیمی‌تر پشتیبانی نمی‌شود؛ رنگ پس‌زمینه‌ی خنثی جایگزین می‌شود */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.sssc-count--badge,
	.sssc-count--box {
		background: rgba(0, 0, 0, 0.05);
	}

	.sssc-count--box {
		border-color: rgba(0, 0, 0, 0.12);
	}
}