@use '../../../@theme/styles/themes' as *;

@include nb-install-component() {
  ngx-d3-bar,
  ngx-d3-pie,
  ngx-d3-advanced-pie,
  ngx-d3-area-stack,
  ngx-d3-line,
  ngx-d3-polar {
    display: block;
    width: 100%;
    height: nb-theme(card-height-medium);

    ::ng-deep {
      .pie-label {
        fill: nb-theme(text-basic-color);
      }

      text {
        fill: nb-theme(text-hint-color);
      }

      .chart-legend {
        .legend-labels {
          background: nb-theme(background-basic-color-2);
        }
        .legend-label {
          color: nb-theme(text-hint-color);
          .active .legend-label-text {
            color: nb-theme(text-basic-color);
          }
        }
      }

      .total-value,
      .item-value,
      .item-percent {
        line-height: 1.25;
      }

      .legend-items {
        overflow-y: hidden;
      }
    }
  }
}