.fusion-chart {
  &.legend-bottom,
  &.legend-left,
  &.legend-right,
  &.legend-top {
    .fusion-chart-inner {
      display: flex;
      flex-direction: row;
    }
  }

  &.legend-bottom,
  &.legend-top {
    .fusion-chart-inner {
      flex-direction: column;
    }
  }

  &.legend-bottom .fusion-chart-legend-wrap,
  &.legend-top .fusion-chart-legend-wrap {
    width: 100%;
    text-align: center;
  }

  &.legend-top {
    .fusion-chart-legend-wrap {
      padding-bottom: 20px;
      order: 1;
    }

    .fusion-chart-wrap {
      order: 2;
    }
  }

  &.legend-bottom {
    .fusion-chart-legend-wrap {
      padding-top: 20px;
      order: 2;
    }

    .fusion-chart-wrap {
      order: 1;
    }
  }

  &.legend-left,
  &.legend-right {
    .fusion-chart-inner {
      .fusion-chart-wrap {
        flex: 15% 1 0;
      }

      .fusion-chart-legend-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 15% 0 0;

        li,
        span {
          display: block;
        }
      }
    }
  }

  &.legend-right {
    .fusion-chart-legend-wrap {
      padding-left: 5px;
      order: 2;
    }

    .fusion-chart-wrap {
      order: 1;
    }
  }

  &.legend-left {
    .fusion-chart-legend-wrap {
      padding-right: 5px;
      order: 1;
    }

    .fusion-chart-wrap {
      order: 2;
    }
  }

  .fusion-chart-legend-wrap {
    user-select: none;
    direction: ltr;

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    li {
      display: inline-block;
      margin: 0;

      span {
        position: relative;
        padding: 3px 12px;
        z-index: 2;
        color: #fff;
        display: inline-block;
        margin: 4px;
      }
    }
  }

  .fusion-chart-title {
    text-align: center;
  }
}