/*
BarChart

Bars on a band axis. Builds on .chart (chart/style.css): this file only
styles the bar marks and their states.

  .chart-bar-mark          one bar; --series is its color
  .chart-bar-mark.is-active      the active bar with activeBar on
  .chart-bar-cursor        the band behind the active category
  .chart-target            a target tick (targets); --series is its color
  .chart-target-mark       the tick's line; .chart-target-halo its edge
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.chart-bar-mark {
  fill: var(--series);
}

.chart-bar-mark.is-active {
  fill-opacity:     var(--opacity-muted);
  stroke:           var(--series);
  stroke-width:     calc(var(--control-border-width) * 2);
  stroke-dasharray: var(--space-1-5) var(--space-1);
  stroke-dashoffset: var(--space-1);
}

/* Bars grow from the baseline the first time the chart is measured. */
.chart.is-ready .chart-bar-mark {
  animation: chart-bar-in var(--chart-motion) var(--chart-ease) var(--chart-delay) both;
}

.chart-bar.is-horizontal .chart-bar-mark {
  transform-origin: left center;
  animation-name:   chart-bar-in-x;
}

.chart-bar-mark {
  transform-box:    fill-box;
  transform-origin: center bottom;
}

.chart-target {
  pointer-events: none;
}

.chart-target line {
  stroke-linecap: round;
}

.chart-target-mark {
  stroke:       var(--series);
  stroke-width: calc(var(--control-border-width) * 2.5);
}

/* A gap-colored edge keeps the tick readable on a bar of the same lightness. */
.chart-target-halo {
  stroke:       var(--chart-gap);
  stroke-width: calc(var(--control-border-width) * 5);
}

.chart.is-ready .chart-target {
  animation: chart-fade-in var(--chart-motion) var(--chart-ease) var(--chart-delay) both;
}

.chart.is-static .chart-target {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .chart.is-ready .chart-target {
    animation: none;
  }
}

.chart-bar-background {
  fill: var(--chart-cursor);
}

@keyframes chart-bar-in {
  from { transform: scaleY(0); }
}

@keyframes chart-bar-in-x {
  from { transform: scaleX(0); }
}

}