/*
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
*/

@layer components {

.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-bar-background {
  fill: var(--chart-cursor);
}

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

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

}