/*
PieChart

Pie and donut charts. Builds on .chart (chart/style.css). A pie keeps a
square box no taller than --chart-polar-size (chart/style.css) unless
the caller sizes it.

  .chart-pie-slice           one slice; --series is its color
  .chart-pie-slice.is-active the active slice
  .chart-pie-slice.is-inactive  the other slices, with inactiveShape="dim"
  .chart-pie-ring            the outer ring of activeShape="ring"
  .chart-pie-line            an outside label's leader line
*/

@layer components {

.chart-pie {
  --chart-separator: var(--control-border-width);
}

.chart-pie-slice {
  fill:            var(--series);
  stroke:          var(--chart-gap);
  stroke-width:    var(--chart-separator);
  stroke-linejoin: round;
}

/* inactiveShape="dim": the slices that are not active fade back. */
.chart-pie-slice.is-inactive {
  opacity: var(--opacity-muted);
}

.chart-pie-ring {
  fill:         var(--series);
  fill-opacity: var(--opacity-muted);
}

.chart-pie-line {
  fill:   none;
  stroke: var(--chart-axis-ink);
}

.chart-pie .chart-label {
  fill: var(--ink);
}

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

/* Slices fade and scale in from the center the first time. */
.chart.is-ready .chart-pie-slice {
  transform-origin: var(--chart-cx) var(--chart-cy);
  animation:        chart-pie-in var(--chart-motion) var(--chart-ease) var(--chart-delay) both;
}

/* Once in, the entry animation is gone, not held at its end. */
.chart.is-ready[data-entered] .chart-pie-slice {
  animation: none;
}

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

}