.line-chart__base {
	cursor: pointer;
}

.line-chart__line-color-0 {
	fill: none;
	stroke: var(--color-primary-dark);
	stroke-width: 3px;
}

.line-chart__line-color-1 {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 3px;
}

.line-chart__line-color-2 {
	fill: none;
	stroke: var(--color-primary-light);
	stroke-width: 3px;
}

.line-chart__line-selected {
	stroke-width: 5px;
}

.line-chart__line-not-selected,
.line-chart__area-not-selected {
	opacity: 0.5;
}

.line-chart__area-color-0 {
	fill: var(--color-primary-dark);
	opacity: 0.6;
}

.line-chart__area-color-1 {
	fill: var(--color-accent);
	opacity: 0.3;
}

.line-chart__area-color-2 {
	fill: var(--color-primary-light);
	opacity: 0.1;
}

.line-chart__line-point {
	cursor: pointer;
	fill: var(--color-text-inverted);
	stroke-width: 3px;
}

.line-chart__line-point-color-0 {
	stroke: var(--color-primary-dark);
}

.line-chart__line-point-color-1 {
	stroke: var(--color-accent);
}

.line-chart__line-point-color-2 {
	stroke: var(--color-primary-light);
}

.line-chart__area-selected {
	&.line-chart__area-color-0 {
		opacity: 0.8;
	}

	&.line-chart__area-color-1 {
		opacity: 0.5;
	}

	&.line-chart__area-color-2 {
		opacity: 0.3;
	}
}

.line-chart__line-end-point-color-0 {
	fill: var(--color-primary-dark);
	stroke: var(--color-primary-dark);
}

.line-chart__line-end-point-color-1 {
	fill: var(--color-accent);
	stroke: var(--color-accent);
}

.line-chart__line-end-point-color-2 {
	fill: var(--color-primary-light);
	stroke: var(--color-primary-light);
}

.line-chart__placeholder {
	@include placeholder();

	padding-bottom: 50%;
}

.line-chart__x-axis,
.line-chart__y-axis {
	font-size: $font-body-extra-small;

	.domain,
	line {
		stroke: var(--color-neutral-0);
	}
}

.line-chart__x-axis text {
	fill: var(--color-neutral-60);
}

.line-chart__y-axis text {
	fill: var(--color-neutral-40);
}

.line-chart__legend {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;

	.legend-item {
		cursor: pointer;
	}

	.legend-item:not(:first-child) {
		margin-left: 20px;
	}
}

.line-chart__legend-sample-0 {
	fill: var(--color-primary-dark);
}

.line-chart__legend-sample-1 {
	fill: var(--color-accent);
}

.line-chart__legend-sample-2 {
	fill: var(--color-primary-light);
}

.line-chart__legend-sample-0-fill {
	fill: var(--color-primary-dark);
}

.line-chart__legend-sample-1-fill {
	fill: var(--color-accent);
}

.line-chart__legend-sample-2-fill {
	fill: var(--color-primary-light);
}

.line-chart__date-range-selected {
	fill: var(--color-accent);
	opacity: 0.1;
}

.line-chart__tooltip {
	pointer-events: none;
}
