@use 'variables' as *;

// Real-Time card (Figma 0:1298): white, 1px Light Stroke colour, rounded 10.
.simplestats-realtime {
	background: #fff;
	border: 1px solid #D0CEBC;              // Light Stroke colour
	border-radius: 10px;
	display: flex;
	flex-direction: column;

	// Card header (0:1299): p-20, flex justify-between items-center, divider Stroke Color #E0E0E0.
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid $border-light;
	}

	&__title-row {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	// "Real-time activity" (0:1301): Typography/Body 2/Bold 16/24, neutral/900 #18191D.
	&__title {
		margin: 0;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		color: #18191D;                     // neutral/900
	}

	// LIVE pill (240:2250): bg #FF4D4D, rounded 100, h-20, gap-4, px-8 py-4.
	&__live {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 20px;
		padding: 4px 8px;
		background: #FF4D4D;
		border-radius: 100px;
	}
	&__live-dot {
		display: inline-flex;
		width: 8px;
		height: 8px;
		animation: simplestats-pulse 1.5s infinite;

		svg { display: block; width: 8px; height: 8px; }
	}
	// LIVE label: Bold 12 white uppercase, leading-normal.
	&__live-label {
		font-size: 12px;
		font-weight: 700;
		line-height: normal;
		color: #fff;
		text-transform: uppercase;
	}

	// Online indicator (240:2253): gap-8 h-24 items-center.
	&__online {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 24px;
	}
	&__online-icon { display: inline-flex; width: 24px; height: 24px; svg { display: block; width: 24px; height: 24px; } }
	// "88 online" (0:1310): Typography/Body 3/SemiBold 14/20, neutral/900 #18191D.
	&__online-label {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: #18191D;                     // neutral/900
	}

	// Activity feed (240:2233): px-20, no vertical padding (entries have their own).
	&__list {
		list-style: none;
		margin: 0;
		padding: 0 20px;
	}

	// Entry (240:2173): h-52, gap-12, items-center, py-12.
	&__entry {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 52px;
		padding: 12px 0;
	}

	// Sentence text (0:1316) — Typography/Caption/Regular 14/20.
	// "Someone from" / "viewed PATH" are neutral/500 #7A7660; country is neutral/900 #18191D semibold.
	&__text {
		flex: 1;
		min-width: 0;
		margin: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: #18191D;                     // neutral/900
	}

	&__muted   {
		color: #7A7660;                     // neutral/500
	}

	&__country {
		font-weight: 600;
		color: #18191D;                     // neutral/900
		margin-left: 5px;
		margin-right: 5px;
	}

	// "Xs ago" (0:1317): Typography/Body 3/Regular 14/20, neutral/900 #18191D.
	&__time {
		flex-shrink: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: #18191D;                     // neutral/900
	}

	&__empty {
		padding: 32px 20px;
		text-align: center;
		color: $muted-text;
	}

	// View-all footer (240:2207): border-t, h-64, py-12 px-16, centered.
	&__footer {
		margin-top: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64px;
		padding: 12px 16px;
		border-top: 1px solid $border-light;
	}

	// Button "View All Activity" (0:1343): Typography/Body 3/SemiBold 14/20, neutral/900 #18191D, button/radius 2.
	&__view-all {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 0;
		color: #18191D;                     // neutral/900
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		text-decoration: none;
		border-radius: 2px;                 // button/radius

		&:hover, &:focus { color: #18191D; }
	}
	&__view-all-icon { display: inline-flex; width: 12px; height: 12px; svg { display: block; width: 12px; height: 12px; } }
}

@keyframes simplestats-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}
