.stats-card {
	width: 21.7%;
	border-right: 1px solid var(--l1-border);
	padding: 9px 12px 13px;

	&--empty {
		justify-content: normal;
	}

	&__title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			text-transform: uppercase;
			font-size: 13px;
			line-height: 22px;
			color: var(--l2-foreground);
			font-weight: 500;
		}
		.duration-indicator {
			display: flex;
			align-items: center;
			gap: 4px;
			.icon {
				display: flex;
				align-self: center;
			}
			.text {
				text-transform: uppercase;
				color: var(--l3-foreground);
				font-size: 12px;
				font-weight: 600;
				letter-spacing: 0.48px;
			}
		}
	}
	&__stats {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		.count-label {
			color: var(--l1-foreground);
			font-family: 'Geist Mono';
			font-size: 24px;
			line-height: 36px;
		}
	}
	&__alert-history-graph {
		margin-top: 80px;

		.alert-history-graph {
			width: 100%;
			height: 72px;
		}
	}
}

.change-percentage {
	width: max-content;
	display: flex;
	padding: 4px 8px;
	border-radius: 20px;
	align-items: center;
	gap: 4px;

	&--success {
		background: color-mix(in srgb, var(--success-background) 10%, transparent);
		color: var(--success-foreground);
	}

	&--error {
		background: color-mix(in srgb, var(--error-background) 10%, transparent);
		color: var(--error-foreground);
	}

	&--no-previous-data {
		color: var(--primary-foreground);
		background: color-mix(in srgb, var(--primary-background) 10%, transparent);
		padding: 4px 16px;
	}

	&__icon {
		display: flex;
		align-self: center;
	}
	&__label {
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
	}
}
