.chart-container {
  /* Chart color tokens (light theme defaults from latest commit) */
  --install-bar-color: var(--orange-1);
  --install-bar-hover-color: var(--orange-2);
  --upgrade-line-color: hsl(212deg, 88%, 62%);
  --upgrade-point-stroke-color: hsl(0deg 0% 82.07%);
  --upgrade-point-fill-color: var(--blue-3);
  --release-point-fill-color: var(--red-1);
  --release-point-stroke-color: hsl(7deg 91.82% 41.44%);
  --avg-line-color: var(--orange-3);
  --install-legend-color: var(--orange-1);
  --upgrade-hit-stroke-width: 12px;

  --spacing: calc(2 * var(--side-padding));
  max-width: calc(var(--max-content) * 2/3 - var(--spacing));
  margin: 10px 0 38px 0;

  @media (min-width: 1200px) {
    margin: 0 0 0 var(--spacing);
    padding: var(--spacing) 0 var(--spacing) var(--spacing);
    border-left: 1px solid var(--background-4);
    width: 100%;
    float: right;
  }
}

/* Dark theme overrides (values from the darker chart changes) */
:root[data-theme='dark'] .chart-container {
  --install-bar-color: hsl(33deg 85.87% 34.85%);
  --install-bar-hover-color: var(--orange-2);
  --upgrade-line-color: hsl(212deg 67.07% 47.48%);
  --upgrade-point-stroke-color: hsl(201 97% 50% / 1);
  --upgrade-point-fill-color: hsl(216.94deg 100% 70.72%);
  --release-point-fill-color: var(--red-1);
  --release-point-stroke-color: hsl(7deg 91.82% 41.44%);
  --avg-line-color: var(--orange-3);
  --install-legend-color: hsl(33.16deg 89.05% 37.35%);
}

section:has(.chart-container)::after {
  /* https://css-tricks.com/snippets/css/clear-fix/ */
  content: "";
  display: table;
  clear: both;
}

.install-chart {
  svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .axis {
    stroke: var(--foreground-4);
    stroke-linecap: round;
    stroke-width: 1;
  }
  .tick {
    fill: var(--foreground-2);
    font-size: 12px;
  }
  .grid {
    stroke: var(--background-3);
    stroke-linecap: round;
    stroke-width: 1;
    pointer-events: none;
  }

  /* x axis labels */
  .x-month-tick {
    stroke: var(--background-4);
    stroke-linecap: round;
    stroke-width: 1;
  }
  .x-month-label {
    fill: var(--foreground-2);
    font-size: 12px;
    pointer-events: none;
  }
  .x-month-label-dimmed {
    fill: var(--foreground-4);
  }

  /* spacer between the bars */
  .week-slice-bg {
    fill: var(--background-2);
  }
  /* bars behind the weeks */
  .week-slice-hit {
    fill: var(--background-2);
    opacity: 0;
  }

  /* weekly installs bars  */
  .bar {
    fill: var(--install-bar-color);
    transition: fill .2s ease-in-out;
  }
  .bar-remove {
    opacity: .6;
  }
  .week:hover .bar,
  .bar:hover {
    fill: var(--install-bar-hover-color);
  }

  /* upgrades lines */
  /* Wide invisible hit areas to make line/points easier to hover */
  .upgrades-line-hit {
    stroke: transparent;
    stroke-width: var(--upgrade-hit-stroke-width);
    fill: none;
    pointer-events: stroke;
  }
  .upgrades-point-hit,
  .release-point-hit {
    fill: transparent;
    stroke: none;
    pointer-events: all;
  }
  .upgrades-line {
    stroke: var(--upgrade-line-color);
    stroke-width: 1.8px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .upgrades-line-dashed {
    stroke-dasharray: 1 4;
  }
  .upgrades-point {
    stroke: var(--upgrade-point-stroke-color);
    stroke-width: 0.6px;
    fill: var(--upgrade-point-fill-color);
    pointer-events: none; /* tooltip is on the hit circle */
  }
  .release-point {
    fill: var(--release-point-fill-color);
    stroke: var(--release-point-stroke-color);
    stroke-width: 1;
    pointer-events: none; /* tooltip is on the hit circle */
  }
  .release-callout {
    stroke: var(--foreground-3);
    stroke-width: 1;
  }
  .release-label {
    fill: var(--foreground-3);
    font-size: 10px;
  }
  .upgrades-line {
    opacity: 1;
    transition: stroke-width .2s ease-in-out;
  }
  &:has(.upgrades-axis:hover),
  &:has(.upgrades-line:hover),
  &:has(.upgrades-point:hover),
  &:has(.upgrades-line-hit:hover),
  &:has(.upgrades-point-hit:hover) {
    .upgrades-line {
      stroke-width: 2.8px;
    }
    .upgrades-point {
      stroke-width: 0.2px;
    }
  }

  /* averages */
  .avg-line {
    stroke: var(--avg-line-color);
    opacity: 0.6;
    stroke-width: 1;
    stroke-dasharray: 2 1;
  }
  .avg-line-net {
    opacity: 1;
  }
}

.legend {
  font-size: 14px;
  line-height: 26px;
  margin-top: 18px;
  color: var(--foreground-2);

  .color {
    display: inline-block;
    background: var(--install-legend-color);
    width: 10px;
    height: 10px;
    margin-right: 1ex;
  }
  .color-gross {
    opacity: .6;
  }
  .color-upgrade {
    background: var(--upgrade-line-color);
    border-radius: 100%;
  }
}

.chart-container:has(.color-install:hover) .install-chart,
.chart-container:has(.color-removal:hover) .install-chart {
  .bar {
    fill: var(--install-bar-hover-color);
  }
}
.chart-container:has(.color-upgrade:hover) .install-chart {
  .upgrades-line {
    stroke-width: 2;
  }
}