@vc_round-chart-legend-width: 40%;
@vc_round-chart-width: 100% - @vc_round-chart-legend-width;
@vc_line-chart-legend-width: 25%;
@vc_line-chart-width: 100% - @vc_line-chart-legend-width;
@vc_chart-legend-font-size: 14px;
@vc_chart-legend-color-size: 1.3em;
@vc_chart-legend-gap: 1em;
@vc_chart-legend-item-gap: 0.3em;

.vc_chart {
  .vc_chart-legend {
    font-size: @vc_chart-legend-font-size;
    margin: 0;
    padding: 0;

    li {
      line-height: @vc_chart-legend-color-size;
      list-style: none;
      margin: 0 0 @vc_chart-legend-item-gap 0;
      min-height: @vc_chart-legend-color-size;
    }

    span {
      border-radius: 0.3em;
      display: inline-block;
      height: @vc_chart-legend-color-size;
      left: 0;
      margin-right: 0.5em;
      vertical-align: middle;
      width: @vc_chart-legend-color-size;
    }
  }

  @media (min-width: @vc_grid-float-breakpoint) {
    .vc_chart-legend {
      display: inline-block;
      vertical-align: middle;
      width: @vc_round-chart-legend-width;

      li {
        margin-left: @vc_chart-legend-gap;
      }
    }

    // Wrapper around canvas element if chart has legend.
    // Legend itself is outside of this element (on the right)
    .vc_chart-with-legend {
      display: inline-block;
      vertical-align: middle;
      width: @vc_round-chart-width;
    }
  }
}

.vc_line-chart {
  .vc_chart-with-legend {
    width: @vc_line-chart-width;
  }

  .vc_chart-legend {
    width: @vc_line-chart-legend-width;
  }
}