@import '../../style/themes/index';
@import '../../style/mixins/index';

@chartLegend-prefix-cls: ~'@{wd-prefix}-chart-legend';

.@{chartLegend-prefix-cls} {
  position: relative;
  height: @chart-legend-height;
  margin: @chart-legend-margin-left 0 0;
  overflow: hidden;
  user-select: none;

  &__list {
    text-align: center;
  }

  // 有翻页
  &__has-more {
    display: inline-block;
    width: calc(100% - @chart-legend-more-width);
    text-align: left;
  }

  &__item {
    display: inline-flex;
    align-items: center;
    height: @chart-legend-height;
    padding-left: @chart-legend-item-margin-padding-left;
    margin: 0 @chart-legend-item-margin;
    font-size: @chart-legend-font-size;
    line-height: @chart-legend-height;
    color: @chart-legend-color;
    vertical-align: top;
    list-style: none;

    &-symbol {
      display: inline-block;
      background: @chart-legend-display-color;
      width: @chart-legend-symbol-width;
      height: @chart-legend-symbol-height;
      margin: 0 @chart-legend-symbol-margin-right 0 @chart-legend-item-margin-padding-left;
    }
  }

  &-text {
    display: inline-block;
    line-height: @chart-legend-height;
  }

  &__symbol-line {
    width: @chart-legend-symbol-line-width;
    height: @chart-legend-symbol-line-height;
    margin: @chart-legend-symbol-line-margin @chart-legend-symbol-line-margin-right 0
      @chart-legend-symbol-line-margin;
  }

  &__symbol-circle {
    width: @chart-legend-symbol-width;
    height: @chart-legend-symbol-height;
    border-radius: 50%;
  }

  &__no-selected {
    span:first-child {
      background: @chart-legend-display-color !important;
    }

    color: @chart-legend-default-color;
  }

  // 翻页样式
  &__more-btns {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    font-size: @chart-legend-font-size;
    line-height: @chart-legend-height;
    color: @chart-legend-symbol-color;
    white-space: nowrap;
    vertical-align: top;
  }

  &__icon-top,
  &__icon-bottom {
    display: inline-block;
    font-size: @chart-legend-icon-font-size;
    line-height: @chart-legend-height;
    color: @chart-legend-icon-color;
    vertical-align: top;
    cursor: pointer;
  }

  &__icon-top {
    margin-right: @chart-legend-item-margin-padding-left;
  }

  &__icon-bottom {
    margin-left: @chart-legend-item-margin-padding-left;
  }

  &__disabled {
    color: @chart-legend-display-color;
  }
}