.funnel-metrics {
	background: var(--l1-background);
	border-radius: 6px;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--l1-border);
	&--loading-state,
	&--empty-state {
		padding: 16px;
	}

	&__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14px 16px;
		border-bottom: 1px solid var(--l1-border);
	}

	&__title {
		color: var(--l2-foreground);
		font-size: 12px;
		font-weight: 500;
		line-height: 22px;
		letter-spacing: 0.48px;
		text-transform: uppercase;
	}

	&__subtitle {
		display: flex;
		align-items: center;
		gap: 8px;

		&-label {
			color: var(--l2-foreground);
			font-family: Inter;
			font-size: 14px;
			line-height: 22px; /* 157.143% */
			letter-spacing: -0.07px;
		}

		&-value {
			color: var(--l1-foreground);
			font-family: 'Geist Mono';
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: 22px; /* 157.143% */
			letter-spacing: -0.07px;
		}
	}

	&__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	&__item {
		display: flex;
		flex-direction: column;
		gap: 26px;
		padding: 14px 16px;
		&:not(:last-child) {
			border-right: 1px solid var(--l1-border);
		}
		&-title {
			color: var(--l1-foreground);
			font-size: 14px;
			line-height: 22px; /* 157.143% */
			letter-spacing: -0.07px;
		}

		&-value,
		&-unit {
			color: var(--l2-foreground);
			font-family: 'Geist Mono';
			font-size: 14px;
			line-height: 22px; /* 157.143% */
			letter-spacing: -0.07px;
		}
	}
}
