.hui-Legend {
  @extend %general-reset;
  margin-top: $x-4;
  margin-left: $x-10;
}

.hui-Legend__item{
  display: inline-block;
  margin-right: $x-4;

  &:last-child {
    margin-right: 0;
  }

  @for $n from 1 through length($data-series-colors) {
    &:nth-child(#{$n}) {
      .hui-Legend__dot {
        background-color: nth($data-series-colors, $n);
      }
    }
  }
}

.hui-Legend__content {
  display: table;
}

.hui-Legend__dot {
  display: table-cell;
  border-radius: 50%;
  width: $x-3;
  height: $x-3;
}

.hui-Legend__label {
  display: table-cell;
  line-height: $x-3;
  padding-left: $x-1;
  font-size: 11px;
  color: $grey-light;
  text-transform: uppercase;
  font-weight: 300;
}