/*******************************************************************************
 * CHART WRAPPER
 *******************************************************************************/

.aero-chart-pie::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: url("../images/orb_bg.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
}

/*******************************************************************************
 * CHART
 *******************************************************************************/

.aero-chart-pie > svg {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

/*******************************************************************************
 * SLICE
 *******************************************************************************/

.aero-chart-pie > svg > circle {
  filter: grayscale(30%);
  transition: filter 0.3s ease;
}

/* Hover */

.aero-chart-pie > svg > circle:hover {
  filter: grayscale(0%);
}