@use '../tokens' as t;

.chart {
  display: grid;
  gap: t.space(1);
  inline-size: 100%;
  // The svg does not mirror in a right-to-left page; the keyboard layer over it must not either.
  direction: ltr;
}

.box {
  position: relative;
}

.plot {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.grid {
  stroke: t.role('line', 0.45);
  stroke-width: 1;
  // Hairlines stay hairlines however wide the chart is stretched.
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 4;
}

.bar {
  fill: t.role('accent');
  opacity: 0.5;
  // Only opacity, never a layout property: a hover that resized the bar would reflow every bar
  // beside it.
  transition: opacity t.duration(fast) t.easing(out);

  &:hover {
    opacity: 1;
  }
}

// The second series — what went wrong, stacked on what went right. Its dashed outline is the cue
// that does not depend on telling red from blue; the legend's swatch carries the same edge.
.secondary {
  fill: t.role('danger');
  opacity: 0.6;
  stroke: t.role('fg-strong');
  stroke-width: 1;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  transition: opacity t.duration(fast) t.easing(out);

  &:hover {
    opacity: 1;
  }
}

.last {
  opacity: 1;
}

.axis {
  @include t.data-text;

  // HTML text, outside the viewBox: it keeps this step at every chart width (issue 494).
  font-size: t.text(xs);
  line-height: t.leading(tight);
  color: t.role('fg-muted');
}

// The busiest value, over the top grid line's end.
.max {
  justify-self: end;
}

// The first and last keys, under the first and last bars.
.keys {
  display: flex;
  justify-content: space-between;
  gap: t.space(2);
}

// Legend keys: the bar's own fill, and the second series' fill with its dashed edge.
.swatch {
  display: block;
  inline-size: t.space(3);
  block-size: t.space(3);
  border-radius: t.radius(sm);
  background: t.role('accent');
}

.swatchSecondary {
  border: t.stroke(hairline) dashed t.role('fg-strong');
  background: t.role('danger', 0.6);
}