// Pie and Donut Chart
//==================================================//

.chart-pie {
  height: 100%;
  width: 100%;

  svg {
    min-height: inherit;
  }

  // Label and Line Colors
  .tspan {
    color: $chart-font-color;
  }

  .lines circle {
    fill: $chart-font-color;
  }

  .label-text {
    font-size: $ids-size-font-base;
  }

  .label-line {
    stroke-width: 2px;
  }

  polyline {
    shape-rendering: crispEdges;
    stroke: $chart-font-color;
    stroke-width: 1px;
  }

  .labels text {
    color: $chart-font-color;
    font-size: $ids-size-font-sm;
  }

  .slices path {
    cursor: pointer;
    -webkit-tap-highlight-color: $transparent;

    &.is-not-selected {
      opacity: 0.3;
    }
  }

  &.has-right-legend .chart-legend {
    border-top: 0;
    margin: 0;
    width: 30%;
    padding-right: 2%;
  }

  &.has-bottom-legend svg {
    min-height: 270px;
  }

  // Adjust smaller bottom legend for the pie chart
  &.is-mobile {
    svg {
      margin-top: -5px;
    }

    .chart-legend {
      align-items: center;
      border-top: 0;
      display: flex;
      height: 85px;
      margin-left: 0;
      margin-top: -20px;

      .chart-legend-item {
        display: inline-block !important;
        padding: 2px 7px;
        width: auto !important;
      }

      .chart-legend-color {
        height: 15px;
        top: 1px;
        width: 15px;
      }

      .chart-legend-item-text {
        position: relative;
        top: 3px;
      }
    }
  }
}

.auto-height .chart-pie {
  svg {
    min-height: 280px;
  }

  &.has-bottom-legend svg {
    min-height: 290px;
  }
}

// A bit different tooltip style
.is-pie.tooltip {
  font-weight: $ids-number-font-weight-base;

  &.is-center {
    min-width: 150px !important;
    max-width: 150px !important;
    transform: translateX(29%);
    text-align: center;
  }

  b {
    display: block;
    text-align: center;
  }
}

.card,
.widget {
  &:not(.auto-height):has(div.has-bottom-legend) {
    height: auto;

    .card-content,
    .widget-content {
      height: auto;
      min-height: auto;
      max-height: 360px;

      .chart-legend.is-bottom {
        padding-block-end: 16px;
      }
    }

    &.to-single {
      min-height: 360px;
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .chart-pie.has-right-legend {
    .chart-legend {
      margin: 0;

      &.is-right {
        position: relative;
        left: 16px;
        width: 32%;
      }
    }

    .chart-legend-item-text {
      padding-left: 0;
      padding-right: 7px;
    }
  }
}