// comparison series colors & shades
.comparison-series-color[data-name=series0] { // series0
  color: @graph-colors-data-series0;
}

.comparison-series-color[data-name=series0-shade1] {
  color: @graph-series0-shade1-color;
}

.comparison-series-color[data-name=series0-shade2] {
  color: @graph-series0-shade2-color;
}

.comparison-series-color[data-name=series0-shade3] {
  color: @graph-series0-shade3-color;
}

.comparison-series-color[data-name=series1] { // series1
  color: @graph-colors-data-series1;
}

.comparison-series-color[data-name=series1-shade1] {
  color: @graph-series1-shade1-color;
}

.comparison-series-color[data-name=series1-shade2] {
  color: @graph-series1-shade2-color;
}

.comparison-series-color[data-name=series1-shade3] {
  color: @graph-series1-shade3-color;
}

.comparison-series-color[data-name=series2] { // series2
  color: @graph-colors-data-series2;
}

.comparison-series-color[data-name=series2-shade1] {
  color: @graph-series2-shade1-color;
}

.comparison-series-color[data-name=series2-shade2] {
  color: @graph-series2-shade2-color;
}

.comparison-series-color[data-name=series2-shade3] {
  color: @graph-series2-shade3-color;
}

.comparison-series-color[data-name=series3] { // series3
  color: @graph-colors-data-series3;
}

.comparison-series-color[data-name=series3-shade1] {
  color: @graph-series3-shade1-color;
}

.comparison-series-color[data-name=series3-shade2] {
  color: @graph-series3-shade2-color;
}

.comparison-series-color[data-name=series3-shade3] {
  color: @graph-series3-shade3-color;
}

.comparison-series-color[data-name=series4] { // series4
  color: @graph-colors-data-series4;
}

.comparison-series-color[data-name=series4-shade1] {
  color: @graph-series4-shade1-color;
}

.comparison-series-color[data-name=series4-shade2] {
  color: @graph-series4-shade2-color;
}

.comparison-series-color[data-name=series4-shade3] {
  color: @graph-series4-shade3-color;
}

.comparison-series-color[data-name=series5] { // series5
  color: @graph-colors-data-series5;
}

.comparison-series-color[data-name=series5-shade1] {
  color: @graph-series5-shade1-color;
}

.comparison-series-color[data-name=series5-shade2] {
  color: @graph-series5-shade2-color;
}

.comparison-series-color[data-name=series5-shade3] {
  color: @graph-series5-shade3-color;
}

.comparison-series-color[data-name=series6] { // series6
  color: @graph-colors-data-series6;
}

.comparison-series-color[data-name=series6-shade1] {
  color: @graph-series6-shade1-color;
}

.comparison-series-color[data-name=series6-shade2] {
  color: @graph-series6-shade2-color;
}

.comparison-series-color[data-name=series6-shade3] {
  color: @graph-series6-shade3-color;
}

.comparison-series-color[data-name=series7] { // series7
  color: @graph-colors-data-series7;
}

.comparison-series-color[data-name=series7-shade1] {
  color: @graph-series7-shade1-color;
}

.comparison-series-color[data-name=series7-shade2] {
  color: @graph-series7-shade2-color;
}

.comparison-series-color[data-name=series7-shade3] {
  color: @graph-series7-shade3-color;
}

// bar graph colors
.bar-graph-colors[data-name=grid-background] {
  color: @theme-color-background-contrast;
}

.bar-graph-colors[data-name=grid-border] {
  color: @theme-color-background-highContrast;
}

.bar-graph-colors[data-name=series1] {
  color: @graph-colors-data-series0;
}

.bar-graph-colors[data-name=series2] {
  color: @graph-colors-data-series1;
}

.bar-graph-colors[data-name=series3] {
  color: @graph-colors-data-series2;
}

.bar-graph-colors[data-name=series4] {
  color: @graph-colors-data-series3;
}

.bar-graph-colors[data-name=series5] {
  color: @graph-colors-data-series4;
}

.bar-graph-colors[data-name=series6] {
  color: @graph-colors-data-series5;
}

.bar-graph-colors[data-name=series7] {
  color: @graph-colors-data-series6;
}

.bar-graph-colors[data-name=series8] {
  color: @graph-colors-data-series7;
}

.bar-graph-colors[data-name=single-metric-label] {
  color: @theme-color-text-lighter;
}

// pie graph colors
.pie-graph-colors[data-name=grid-background] {
  color: @theme-color-background-contrast;
}

.pie-graph-colors[data-name=grid-border] {
  color: @theme-color-background-highContrast;
}

.pie-graph-colors[data-name=series1] {
  color: @graph-colors-data-series0;
}

.pie-graph-colors[data-name=series2] {
  color: @graph-colors-data-series1;
}

.pie-graph-colors[data-name=series3] {
  color: @graph-colors-data-series2;
}

.pie-graph-colors[data-name=series4] {
  color: @graph-colors-data-series3;
}

.pie-graph-colors[data-name=series5] {
  color: @graph-colors-data-series4;
}

.pie-graph-colors[data-name=series6] {
  color: @graph-colors-data-series5;
}

.pie-graph-colors[data-name=series7] {
  color: @graph-colors-data-series6;
}

.pie-graph-colors[data-name=series8] {
  color: @graph-colors-data-series7;
}

.pie-graph-colors[data-name=ticks] {
  color: #ccc;
}

.pie-graph-colors[data-name=single-metric-label] {
  color: @theme-color-text-light;
}

//line chart colors

// evolution graph colors

.evolution-graph-colors[data-name=series1] {
  color: @graph-colors-data-series0;
}

.evolution-graph-colors[data-name=series2] {
  color: @graph-colors-data-series1;
}

.evolution-graph-colors[data-name=series3] {
  color: @graph-colors-data-series2;
}

.evolution-graph-colors[data-name=series4] {
  color: @graph-colors-data-series3;
}

.evolution-graph-colors[data-name=series5] {
  color: @graph-colors-data-series4;
}

.evolution-graph-colors[data-name=series6] {
  color: @graph-colors-data-series5;
}

.evolution-graph-colors[data-name=series7] {
  color: @graph-colors-data-series6;
}

.evolution-graph-colors[data-name=series8] {
  color: @graph-colors-data-series7;
}


// Shared graph palette applied to the evolution, bar and pie charts.
.graph-series-palette(@ns) {
  // Base colors
  .@{ns}[data-name=series0] { color: @graph-series0-color; }
  .@{ns}[data-name=series1] { color: @graph-series1-color; }
  .@{ns}[data-name=series2] { color: @graph-series2-color; }
  .@{ns}[data-name=series3] { color: @graph-series3-color; }
  .@{ns}[data-name=series4] { color: @graph-series4-color; }
  .@{ns}[data-name=series5] { color: @graph-series5-color; }
  .@{ns}[data-name=series6] { color: @graph-series6-color; }
  .@{ns}[data-name=series7] { color: @graph-series7-color; }

  // Shade 1
  .@{ns}[data-name=series0-shade1] { color: @graph-series0-shade1-color; }
  .@{ns}[data-name=series1-shade1] { color: @graph-series1-shade1-color; }
  .@{ns}[data-name=series2-shade1] { color: @graph-series2-shade1-color; }
  .@{ns}[data-name=series3-shade1] { color: @graph-series3-shade1-color; }
  .@{ns}[data-name=series4-shade1] { color: @graph-series4-shade1-color; }
  .@{ns}[data-name=series5-shade1] { color: @graph-series5-shade1-color; }
  .@{ns}[data-name=series6-shade1] { color: @graph-series6-shade1-color; }
  .@{ns}[data-name=series7-shade1] { color: @graph-series7-shade1-color; }

  // Shade 2
  .@{ns}[data-name=series0-shade2] { color: @graph-series0-shade2-color; }
  .@{ns}[data-name=series1-shade2] { color: @graph-series1-shade2-color; }
  .@{ns}[data-name=series2-shade2] { color: @graph-series2-shade2-color; }
  .@{ns}[data-name=series3-shade2] { color: @graph-series3-shade2-color; }
  .@{ns}[data-name=series4-shade2] { color: @graph-series4-shade2-color; }
  .@{ns}[data-name=series5-shade2] { color: @graph-series5-shade2-color; }
  .@{ns}[data-name=series6-shade2] { color: @graph-series6-shade2-color; }
  .@{ns}[data-name=series7-shade2] { color: @graph-series7-shade2-color; }

  // Shade 3
  .@{ns}[data-name=series0-shade3] { color: @graph-series0-shade3-color; }
  .@{ns}[data-name=series1-shade3] { color: @graph-series1-shade3-color; }
  .@{ns}[data-name=series2-shade3] { color: @graph-series2-shade3-color; }
  .@{ns}[data-name=series3-shade3] { color: @graph-series3-shade3-color; }
  .@{ns}[data-name=series4-shade3] { color: @graph-series4-shade3-color; }
  .@{ns}[data-name=series5-shade3] { color: @graph-series5-shade3-color; }
  .@{ns}[data-name=series6-shade3] { color: @graph-series6-shade3-color; }
  .@{ns}[data-name=series7-shade3] { color: @graph-series7-shade3-color; }
}

// Apply the graph palette. These come after the base series-color rules above so
// they win by source order (same specificity).
.graph-series-palette(evolution-graph-colors);
.graph-series-palette(bar-graph-colors);
.graph-series-palette(pie-graph-colors);

// Lighter tick color for the evolution and bar charts.
.evolution-graph-colors[data-name=ticks] { color: #E0E0E0; }
.bar-graph-colors[data-name=ticks] { color: #E0E0E0; }

// Keep comparison colors aligned with the graph palette.
.graph-series-palette(comparison-series-color);

.evolution-graph-colors[data-name=grid-background] {
  color: @theme-color-background-contrast;
}

.evolution-graph-colors[data-name=grid-border] {
  color: @theme-color-background-highContrast;
}

.evolution-graph-colors[data-name=single-metric-label] {
  color: @theme-color-text-lighter;
}