@import url(../var.less);
@import url(../mixins/_badge.less);

@badge-prefix: ~"@{prefix}badge";

.@{badge-prefix}{
  position: relative;
  vertical-align: middle;
  display: inline-block;

  &__content {
    background-color: @badge-background-color;
    border-radius: @badge-radius;
    color: @color-white;
    display: inline-block;
    font-size: @badge-font-size;
    height: @badge-size ;
    line-height: @badge-size;
    padding: 0 @badge-padding;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 0 0 1px #fff;

    &.is-fixed {
      position: absolute;
      top: 0;
      right:  @badge-size / 2 + 1;
      transform: translateY(-50%) translateX(100%);

      &.is-dot {
        right: 5px;
      }
    }

    &.is-dot {
      height: 10px;
      width: 10px;
      padding: 0;
      right: 0;
      border-radius: 50%;
    }

    &.is-large {
      height: @badge-large-size ;
      line-height: @badge-large-size;
      border-radius: @badge-large-radius
    }

    .loopBadgeType(@i) when (@i < (length(@typeList)+1)) {
      .badge-type(extract(@typeList, @i), extract(@typeColorList, @i));
      .loopBadgeType(@i+1);
    }

    .loopBadgeType(1)
  }
}