@reference 'tailwindcss';

:host {
  --emr-mchart-pie-stroke-color: var(--color-background);
  --emr-mchart-pie-legend-item-color: var(--color-neutral-900);
  --emr-mchart-pie-legend-item-hover-color: var(--color-primary);
  --emr-mchart-pie-value-color: var(--color-neutral-950);

  display: block;
  overflow: hidden;

  svg {
    width: 100%;
    height: 100%;
  }

  &:has(.data-item.active) {
    ::ng-deep {
      .data-item:not(.active) {
        opacity: 0.7;
        scale: 0.93;
        transition: scale 0.2s;
      }
    }
  }

  ::ng-deep {
    .data-item {
      stroke: var(--emr-mchart-pie-stroke-color);
    }

    .value {
      text-anchor: middle;
      alignment-baseline: middle;
      fill: var(--emr-mchart-pie-value-color);
    }

    .legend-item {
      cursor: pointer;

      &:hover {
        .legend-item-text {
          fill: var(--emr-mchart-pie-legend-item-hover-color);
        }
      }
    }

    .legend-item-text {
      fill: var(--emr-mchart-pie-legend-item-color);
    }
  }
}

:host-context(html.dark) {
  --emr-mchart-pie-legend-item-color: var(--color-neutral-200);
}
