$historical-counts-brand-primary: #3663E5;
$historical-counts-font-size: 14px;

.historical-counts-font-size-tester {
  font-size: $historical-counts-font-size;
}

/* X Axis */
.historical-counts-axis-x .tick line { display: none; }
.historical-counts-axis-x .domain { display: none; }
.historical-counts-axis-x .tick text { 
  transform: translate(0, 10px);
  font-size: $historical-counts-font-size;
}

// Y Axis.
.historical-counts-axis-y {
  transform: translate(-32px, (14px / 2));
  font-size: $historical-counts-font-size;
}
.axis-y-maximum-line {
  stroke: #aaa;
  transform: translate(32px, -5px);
}

// This path is the line that is rendered on the chart indicating the data to the user.
.historical-counts-path {
  fill: rgba($historical-counts-brand-primary, 0.1);
  shape-rendering: crispEdges;
}

// Also, render a seperate line for the colored outline along the top of the path.
.historical-counts-path-outline {
  shape-rendering: crispEdges;
  stroke: $historical-counts-brand-primary;
  stroke-width: 1px;
  fill: transparent;
}


// Capacity line
.historical-counts-capacity-region {
  fill: rgba($historical-counts-brand-primary, 0.1);
}

/* Overlay marker line (the line with the circle that tracks the mouse cursor) */
.historical-counts-overlay-line-path {
  stroke: $historical-counts-brand-primary;
  stroke-width: 1;
}

.historical-counts-overlay-circle {
  fill: $historical-counts-brand-primary;
}

/* Flag lines */
.historical-counts .flag .flag-line {
  stroke: #3663E5;
}
.historical-counts .flag .flag-line-label {
  fill: #fff;
  transform: translate(10px, 20px);
}
.historical-counts .flag .flag-line-label-background {
  fill: #3663E5;
}


// The overlay dialogs above and below the chart.
.historical-counts-overlay-top, .historical-counts-overlay-bottom {
  fill: #fff;
  stroke: #dedede;
  user-select: none;
}

.historical-counts-overlay-bottom-text, .historical-counts-overlay-top-text {
  fill: #31383c;
  stroke: transparent;
  font-weight: 600;
  user-select: none;
}

.historical-counts-overlay-top-shadow,
.historical-counts-overlay-bottom-shadow {
  filter: url(#shadow-blur);
  fill: rgba(0, 0, 0, 0.1);
}