/* ==========================================================================
 * Donut Chart
 * ========================================================================== */

.mds-c-donut-chart {
  --donut-diameter: 160px;
  --donut-spacing: 10px;

  aspect-ratio: 1;
  display: flex;
  font-size: var(--mds-d-font-size--xs);
  line-height: 1;
  max-width: calc(var(--donut-diameter) + (var(--donut-spacing) * 2));
  position: relative;
  width: 100%;

  &--size-sm {
    --donut-diameter: 128px;
  }

  &--size-lg {
    --donut-diameter: 192px;

    font-size: var(--mds-d-font-size--sm);
  }

  .recharts-wrapper {
    /* !important required to override Recharts' inline styles for responsive sizing */
    height: 100% !important;
    max-height: 100%;
    max-width: 100%;
    width: 100% !important;

    svg {
      /* !important required to override Recharts' inline styles for responsive sizing */
      height: 100% !important;
      max-height: 100%;
      max-width: 100%;
      width: 100% !important;
    }
  }
}

.mds-c-donut-chart__slices {
  fill: var(--mds-t-color--primary);
}

.mds-c-donut-chart__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.mds-c-donut-chart__text {
  @mixin mds-m-text-overflow-ellipsis;

  margin: calc(var(--mds-d-spacing--sm) * -1);
  padding: var(--mds-d-spacing--sm);
  text-align: center;
  width: 70%;

  &--middle {
    font-size: var(--mds-d-font-size--xxxl);
    font-weight: var(--mds-d-font-weight--bold);
    margin: 0;

    .mds-c-donut-chart--size-sm & {
      font-size: var(--mds-d-font-size--xl);
      padding: var(--mds-d-spacing--xs);
    }
  }
}