/*
RadialChart

Radial bars and gauges. Builds on .chart (chart/style.css), which keeps
polar charts square.

  .chart-radial-bar          one arc; --series is its color
  .chart-radial-track        the background arc behind a bar
  .chart-radial-ring         a grid ring; .is-filled draws a track
*/

@layer components {

.chart-radial-bar {
  fill:   var(--series);
  stroke: none;
}

.chart-radial.is-separated .chart-radial-bar {
  stroke:       var(--chart-gap);
  stroke-width: var(--chart-stroke-width);
}

.chart-radial-track {
  fill: var(--chart-cursor);
}

.chart-radial-ring {
  fill:   none;
  stroke: var(--chart-grid);
}

.chart-radial-ring.is-filled {
  fill:   var(--chart-gap);
  stroke: none;
}

.chart-radial-ring.is-filled.is-first {
  fill: var(--chart-cursor);
}

.chart-radial .chart-label.is-inside {
  fill: var(--chart-label-inside);
}

.chart.is-ready .chart-radial-bar {
  transform-origin: var(--chart-cx) var(--chart-cy);
  animation:        chart-radial-in var(--chart-motion) var(--chart-ease) var(--chart-delay) both;
}

@keyframes chart-radial-in {
  from {
    opacity:   0;
    transform: scale(var(--enter-scale));
  }
}

.chart.is-static.is-ready .chart-radial-bar {
  animation: none;
}

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

}

/* Recharts RadialBar activeShape: the active row's bars outlined, as BarChart activeBar. */
@layer components {
  .chart-radial-bar.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);
  }
}