/* Bar chart — labelled bars, one or two series, horizontal or vertical.
 * ---------------------------------------------------------------------- */

@layer components {
  .bar-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    inline-size: 100%;
  }

  .bar-chart__svg {
    inline-size: 100%;
    block-size: auto;
  }

  .bar-chart__grid line {
    stroke: var(--color-ink-lightest);
    stroke-width: 1;
  }

  .bar-chart__axes text {
    fill: var(--color-ink-medium);
    font-family: var(--font-mono);
  }

  .bar-chart__category {
    fill: var(--color-ink);
  }

  .bar-chart__bar {
    fill: var(--series-color);
    fill-opacity: 0.85;
  }
}