.container {
	/* ring around the dots, matches what the chart sits on */
	--line-chart-surface: var(--color-bg-high);

	position: relative;
	height: 170px;

	&.interactive {
		cursor: crosshair;
		touch-action: pan-y;
	}
}

.plot {
	position: absolute;
}

.chart {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* the area gradient's stops and the lines resolve their color from here via currentColor */
.series0 {
	color: var(--color-fg-accent);
}

.series1 {
	color: var(--color-info-high);
}

.series2 {
	color: var(--color-fg-second);
}

.line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.gridLine {
	stroke: color-mix(in oklch, var(--color-text) 8%, transparent);
	stroke-width: 1;

	&.gridLineDashed {
		stroke-dasharray: 3 4;
	}
}

.hoverLine {
	stroke: color-mix(in oklch, var(--color-text) 30%, transparent);
	stroke-width: 1;
}

.label {
	font-size: 10px;
	font-weight: var(--weight-semi);
	fill: var(--color-text-high);
}

/* halo keeps the label readable where the line or area passes under it */
.yLabel {
	paint-order: stroke;
	stroke: var(--line-chart-surface);
	stroke-width: 3px;
	stroke-linejoin: round;
}

.peakLabel {
	position: absolute;
	translate: -50% calc(-100% - 7px);
	font-size: 11px;
	font-weight: var(--weight-extra);
	line-height: 1;
	color: var(--color-text);
	white-space: nowrap;
	pointer-events: none;
}

.dot {
	fill: currentColor;
	stroke: var(--line-chart-surface);
	stroke-width: 2;
}

.highlight {
	stroke: var(--line-chart-surface);
	stroke-width: 2;

	&.highlight0 {
		fill: var(--color-fg-accent);
	}

	&.highlight1 {
		fill: var(--color-fg-second);
	}
}

.tooltip {
	position: absolute;
	padding: var(--s-1) var(--s-2);
	background-color: var(--color-bg);
	border: var(--border-style);
	border-radius: var(--radius-box);
	white-space: nowrap;
	pointer-events: none;
}

.tooltipHeader {
	font-size: var(--font-2xs);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

.tooltipValue {
	font-size: var(--font-sm);
	font-weight: var(--weight-extra);
	font-variant-numeric: tabular-nums;
}

.tooltipRow {
	display: flex;
	align-items: center;
	gap: var(--s-1-5);
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
}

.tooltipDot {
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background-color: currentColor;
}

.tooltipRowValue {
	margin-inline-start: auto;
	padding-inline-start: var(--s-2);
	font-weight: var(--weight-extra);
	font-variant-numeric: tabular-nums;
}