@use 'variables' as *;

// Stat Tag (Figma 240:937): rounded-[100px], px-8 py-4, gap-4.
// Caption/SemiBold 14/20. Success: bg #DCFCE7 fg #27AE60. Down: bg #FEE2E2 fg #DC2626.
.simplestats-delta-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;

	&--up   { background: #DCFCE7; color: #16A34A; }   // semantic/success-bg + semantic/success
	&--down { background: #FEE2E2; color: #DC2626; }   // semantic/danger-bg + semantic/danger
	&--zero { background: transparent; color: $gray-700; }

	&__icon  { display: inline-flex; width: 12px; height: 12px; svg { width: 12px; height: 12px; display: block; } }
	&__value { line-height: 20px; }
}

.simplestats-country-flag {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	background: #F1F2F4;
	flex-shrink: 0;

	img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

// Referrer favicon (Figma 240:1126): 20×20, circular crop.
// "Direct / None" uses bundled chain icon at full 20×20 in $text-1.
.simplestats-ref-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	color: #1E1E1E;
	overflow: hidden;
	border-radius: 50%;
	background: transparent;

	img { width: 100%; height: 100%; object-fit: cover; display: block; }
	svg { width: 100%; height: 100%; display: block; }

	&--direct {
		border-radius: 0;
		background: transparent;
	}
}

.simplestats-dashboard-empty__pill-warning {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 12px;
	background: $delta-down-bg;
	color: $delta-down-fg;
	font-size: 12px;
	font-weight: 500;

	svg { width: 12px; height: 12px; }
}
