@import url("./load-balancing-colours.css");

:root {
	--chart-orange: var(--color-palette-orange-line);
	--chart-blue: var(--color-palette-blue-line);
	--chart-green: var(--color-palette-green-line);
	--chart-red: var(--color-palette-red-line);
}

/* Reserve the coin machine before its custom element upgrades. */
s-load-balancing-hero {
	display: block;
	width: 100%;
	height: 100%;
	margin-block: 0;
}

s-simulation {
	display: block;
	box-sizing: content-box;
	height: calc(var(--simulation-height, 250px) + 3.625rem + 1px);
	contain: strict;
	content-visibility: auto;
}

s-simulation[show-ewma-graph] {
	height: calc(var(--simulation-height, 250px) + 11.125rem + 2px);
	margin-block: var(--space-5);
}

s-simulation[show-controls] {
	height: calc(var(--simulation-height, 250px) + 20.875rem + 1px);
}

.load-balancing-chart {
	height: 434px;
	contain: strict;
	content-visibility: auto;
}

.load-balancing-chart > * {
	box-sizing: content-box;
	margin: 0;
	padding: 0;
}

.load-balancing-playground {
	margin-top: var(--space-5);
}