.timeline-graph {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: var(--bg-ink-400);
	padding: 12px;
	border-radius: 4px;
	border: 1px solid var(--bg-slate-500);
	height: 150px;

	&__title {
		width: max-content;
		padding: 2px 8px;
		border-radius: 4px;
		border: 1px solid #1d212d;
		background: rgba(29, 33, 45, 0.5);
		color: #ebebeb;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: -0.06px;
	}
	&__chart {
		.chart-placeholder {
			width: 100%;
			height: 52px;
			background: rgba(255, 255, 255, 0.1215686275);
			display: flex;
			align-items: center;
			justify-content: center;
			.chart-icon {
				font-size: 2rem;
			}
		}
	}
}

.lightMode {
	.timeline-graph {
		background: var(--bg-vanilla-200);
		border-color: var(--bg-vanilla-300);
		&__title {
			background: var(--bg-vanilla-100);
			color: var(--text-ink-400);
			border-color: var(--bg-vanilla-300);
		}
		&__chart {
			.chart-placeholder {
				background: var(--bg-vanilla-300);
			}
		}
	}
}
