charts/src/css/charts.scss

:root {
	--charts-label-color: #313b44;
	--charts-axis-line-color: #f4f5f6;

	--charts-tooltip-title: var(--charts-label-color);
	--charts-tooltip-label: var(--charts-label-color);
	--charts-tooltip-value: #192734;
	--charts-tooltip-bg: #ffffff;

	--charts-stroke-width: 2px;
	--charts-dataset-circle-stroke: #ffffff;
	--charts-dataset-circle-stroke-width: var(--charts-stroke-width);

	--charts-legend-label: var(--charts-label-color);
	--charts-legend-value: var(--charts-label-color);
}

.chart-container {
	position: relative; /* for absolutely positioned tooltip */

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
		"Helvetica Neue", sans-serif;

	.axis,
	.chart-label {
		fill: var(--charts-label-color);

		line {
			stroke: var(--charts-axis-line-color);
		}
	}

	.dataset-units {
		circle {
			stroke: var(--charts-dataset-circle-stroke);
			stroke-width: var(--charts-dataset-circle-stroke-width);
		}

		path {
			fill: none;
			stroke-opacity: 1;
			stroke-width: var(--charts-stroke-width);
		}
	}

	.dataset-path {
		stroke-width: var(--charts-stroke-width);
	}

	.path-group {
		path {
			fill: none;
			stroke-opacity: 1;
			stroke-width: var(--charts-stroke-width);
		}
	}

	line.dashed {
		stroke-dasharray: 5, 3;
	}

	.axis-line {
		.specific-value {
			text-anchor: start;
		}
		.y-line {
			text-anchor: end;
		}
		.x-line {
			text-anchor: middle;
		}
	}

	.legend-dataset-label {
		fill: var(--charts-legend-label);
		font-weight: 600;
	}

	.legend-dataset-value {
		fill: var(--charts-legend-value);
	}
}

.graph-svg-tip {
	position: absolute;
	z-index: 99999;
	padding: 10px;
	font-size: 12px;
	text-align: center;
	background: var(--charts-tooltip-bg);
	box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1),
		0px 2px 6px rgba(17, 43, 66, 0.08),
		0px 40px 30px -30px rgba(17, 43, 66, 0.1);
	border-radius: 6px;

	ul {
		padding-left: 0;
		display: flex;
	}

	ol {
		padding-left: 0;
		display: flex;
	}

	ul.data-point-list {
		li {
			min-width: 90px;
			font-weight: 600;
		}
	}

	.svg-pointer {
		position: absolute;
		height: 12px;
		width: 12px;
		border-radius: 2px;
		background: var(--charts-tooltip-bg);
		transform: rotate(45deg);
		margin-top: -7px;
		margin-left: -6px;
	}

	&.comparison {
		text-align: left;
		padding: 0px;
		pointer-events: none;

		.title {
			display: block;
			padding: 16px;
			margin: 0;
			color: var(--charts-tooltip-title);
			font-weight: 600;
			line-height: 1;
			pointer-events: none;
			text-transform: uppercase;

			strong {
				color: var(--charts-tooltip-value);
			}
		}

		ul {
			margin: 0;
			white-space: nowrap;
			list-style: none;

			&.tooltip-grid {
				display: grid;
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: 5px;
			}
		}

		li {
			display: inline-block;
			display: flex;
			flex-direction: row;
			font-weight: 600;
			line-height: 1;

			padding: 5px 15px 15px 15px;

			.tooltip-legend {
				height: 12px;
				width: 12px;
				margin-right: 8px;
				border-radius: 2px;
			}

			.tooltip-label {
				margin-top: 4px;
				font-size: 11px;
				line-height: 1.25;
				max-width: 150px;
				white-space: normal;

				color: var(--charts-tooltip-label);
			}

			.tooltip-value {
				color: var(--charts-tooltip-value);
			}
		}
	}
}