/*
RadarChart

Values on spokes, one polygon per series. Builds on .chart
(chart/style.css), which also keeps polar charts square.

  .chart-radar-shape       one series polygon; --series is its color
  .chart-radar-grid        rings and spokes (.is-filled with grid fill)
  .chart-angle-tick        a category label; .chart-angle-detail above it
*/

@layer components {

.chart-radar {
  --chart-radar-opacity: calc(var(--opacity-overlay) * 1.2);
}

.chart-radar-shape {
  fill-rule:       evenodd;
  fill:            var(--series);
  fill-opacity:    var(--chart-radar-opacity);
  stroke:          none;
  stroke-width:    var(--chart-stroke-width);
  stroke-linejoin: round;
}

.chart-radar.is-lines .chart-radar-shape {
  stroke: var(--series);
}

.chart-radar-grid path {
  fill:   none;
  stroke: var(--chart-grid);
}

.chart-radar-grid.is-filled .chart-radar-ring {
  fill:         var(--series);
  fill-opacity: calc(var(--opacity-overlay) * 0.4);
}

.chart-angle-tick {
  fill: var(--chart-axis-ink);
}

.chart-angle-detail {
  fill:        var(--ink);
  font-weight: var(--weight-ui);
}

.chart-radius-tick {
  fill:                 var(--ink);
  font-variant-numeric: tabular-nums;
}

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

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

.chart.is-static.is-ready .chart-radar-shape {
  animation: none;
}

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

}

/* Recharts PolarAngleAxis and PolarRadiusAxis axisLine and tickLine. */
@layer components {
  .chart-axis-lines path {
    fill:   none;
    stroke: var(--chart-grid);
  }
}