// Main uPlot wrapper
.uplot {
	position: relative;
	display: inline-block;
	background-color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	line-height: 1.5;
	box-sizing: border-box;

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	// Plot title
	.title {
		text-align: center;
		padding: 16px;
		font-size: 18px;
		font-weight: bold;
	}

	// Chart area wrapper
	.wrap {
		position: relative;
	}

	// Plot container without axes
	.plot {
		position: relative;
		display: inline-block;
		outline: 1px solid #eee;
		overflow-y: hidden;
		overflow-x: hidden;
		user-select: none;

		canvas {
			display: block;
		}
	}

	// Mouse cursor lines
	[class^="cursor-"] {
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none;
		will-change: transform;
		z-index: 100;
	}

	.cursor-x {
		height: 100%;
		border-right: 1px dashed #607D8B;
	}

	.cursor-y {
		width: 100%;
		border-bottom: 1px dashed #607D8B;
	}

	// Selected plot area (i.e. for zoom-in)
	.select {
		background: rgba(0, 0, 0, 0.07);
		position: absolute;
		pointer-events: none;

		&.off {
			display: none;
		}
	}

	// Currently hovered plot point(s)
	.hover-point {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 50%;
		filter: brightness(85%);
		pointer-events: none;
		user-select: none;
		will-change: transform;
		z-index: 100;
	}

	// Axes
	[class^="axis-"] {

		// Disabled axis
		&.off {
			display: none;
		}

		// Axis labels
		.labels {
			text-align: center;
			position: absolute;
			font-size: 12px;
			font-weight: bold;

			>* {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				white-space: nowrap;
			}
		}

		// Axis values container
		.values {
			position: absolute;
		}
	}

	// Y axis labels should be vertical
	[class^="axis-y-1"] .labels>* {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	[class^="axis-y-3"] .labels>* {
		transform: translate(-50%, -50%) rotate(-90deg);
	}

	// Y axis values container
	[class^="axis-y"] .values {
		top: 0;
		height: 100%;
	}

	// X axis values
	[class^="axis-x"] .values {
		&>* {
			position: absolute;
			transform: translateX(-50%);
			font-size: 12px;
			white-space: pre-line;
			text-align: center;
			height: 100%;

			&::before {
				content: "";
				height: 10px;
				border-left: 2px solid #eee;
				transform: translateX(-50%);
				position: absolute;
				left: 50%;
				z-index: -1;
			}
		}
	}

	// Top X axis
	.axis-x-0 .values>* {
		padding-bottom: 10px;

		&::before {
			bottom: 0;
		}
	}

	// Bottom X axis
	.axis-x-2 .values>* {
		padding-top: 10px;

		&::before {
			top: 0;
		}
	}

	// Y axis values
	[class^="axis-y"] .values>* {
		position: absolute;
		transform: translateY(-50%);
		font-size: 12px;
		white-space: pre-line;
		width: 100%;

		&::before {
			content: "";
			width: 10px;
			border-top: 2px solid #eee;
			transform: translateY(-50%);
			position: absolute;
			top: 50%;
			z-index: -1;
		}
	}

	// Right Y axis
	.axis-y-1 .values>* {
		padding-left: 14px;
		text-align: left;

		&::before {
			left: 0;
		}
	}

	// Left Y axis
	.axis-y-3 .values>* {
		padding-right: 14px;
		text-align: right;

		&::before {
			right: 0;
		}
	}
	

	// Legend with hovered values	
	.legend {
		font-size: 14px;
		margin: auto;
		text-align: center;

		// Inline elements
		&.inline {
			display: block;

			* {
				display: inline-block;
			}

			tr {
				margin-right: 16px;

				// Add ":" after labels
				th::after {
					content: ":";
					vertical-align: middle;
				}
			}
		}

		// Series element
		.series {
			>* {
				padding: 4px;
			}

			// Disabled series
			&.off>* {
				opacity: 0.3;
			}

			// Series label
			th {
				font-weight: 600;
				cursor: pointer;

				>* {
					vertical-align: middle;
					display: inline-block;
				}

				// Series color indicator
				.ident {
					width: 1em;
					height: 1em;
					margin-right: 4px;
					border: 2px solid transparent;
				}
			}
		}
	}
}