@import "../variables";
@import "../helpers";

.scatter-graph-point {
	transition: all 250ms linear;
	pointer-events: none;

	body.dark-theme & {
		fill: map-get($dark-primary, default);

		&-1 {
			fill: map-get($dark-accent, default);
		}
	}
	body.light-theme & {
		fill: map-get($light-primary, default);

		&-1 {
			fill: map-get($light-accent, default);
		}
	}
}

.user-line {
	pointer-events: none;

	body.dark-theme & {
		&-x {
			stroke: light-success-overlay(12);
		}

		&-y {
			stroke: light-info-overlay(12);
		}
	}
	body.light-theme & {
		&-x {
			stroke: light-success-overlay(12);
		}

		&-y {
			stroke: light-info-overlay(12);
		}
	}
}

.chart-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	padding: $spacing;
	user-select: none;
	pointer-events: none;

	border-radius: $shape-radius;

	&.fixed {
		position: fixed;
		max-width: 180px;
		transform: translate(-50%, -90%);

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 100%);
			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;

			body.dark-theme & {
				border-top: 8px solid rgba(dark-color-overlay(16), 0.9);
			}
			body.light-theme & {
				border-top: 8px solid rgba(light-color-overlay(16), 0.9);
			}
		}
	}

	span {
		margin: 0;
		padding: 0;
	}

	body.dark-theme & {
		background: rgba(dark-color-overlay(16), 0.9);

		span {
			&.x {
				color: light-success-overlay(24);
			}

			&.y {
				color: light-info-overlay(24);
			}
		}
	}
	body.light-theme & {
		background: rgba(light-color-overlay(1), 0.9);

		span {
			&.x {
				color: light-success-overlay(24);
			}

			&.y {
				color: light-info-overlay(24);
			}
		}
	}
}

.vertical-bar {
	transition: all 250ms linear;
	transform-origin: bottom;

	body.dark-theme & {
		fill: map-get($dark-accent, default);

		&.ghost {
			fill: map-get($mpwa-dark-foreground, text);
		}
	}
	body.light-theme & {
		fill: map-get($light-accent, default);

		&.ghost {
			fill: map-get($mpwa-light-foreground, text);
		}
	}
}

path.line {
	transition: all 250ms linear;
	pointer-events: none;

	body.dark-theme & {
		&.line-0 {
			stroke: shade(map-get($dark-primary, default), 15%);
		}
		&.line-1 {
			stroke: shade(map-get($dark-accent, default), 15%);
		}
	}
	body.light-theme & {
		&.line-0 {
			stroke: shade(map-get($light-primary, default), 15%);
		}
		&.line-1 {
			stroke: shade(map-get($light-accent, default), 15%);
		}
	}
}

.axis {
	font-family: Roboto;
	pointer-events: none;

	path,
	line {
		fill: none;
		shape-rendering: crispEdges;
	}

	&.y-axis,
	&.x-axis {
		.domain {
			display: none;
		}
	}

	&.y-axis line:not(.full-width-line) {
		display: none;
	}

	body.dark-theme & {
		path,
		line {
			stroke: rgba(map-get($dark-theme-foreground, text), 0.1);
		}
		text {
			fill: rgba(map-get($dark-theme-foreground, text), 0.5);
		}
	}
	body.light-theme & {
		path,
		line {
			stroke: rgba(map-get($light-theme-foreground, text), 0.1);
		}
		text {
			fill: rgba(map-get($light-theme-foreground, text), 0.5);
		}
	}
}

.unavailable-message,
.empty-message {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	body.dark-theme & {
		color: map-get($dark-theme-foreground, text);
	}
	body.light-theme & {
		color: map-get($light-theme-foreground, text);
	}
}