@import "mixins/mixins";
@import "common/var";

@include b(badge) {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  .el-button {
    border: none;
  }
  @include e(icon){
    color: $--color-text-2!important;
    font-size: $--font-size-body-3!important;
  }
  @include e(content) {
    background-color: $--badge-background-color;
    border-radius: $--badge-radius;
    color: $--color-white;
    display: inline-block;
    font-size: $--badge-font-size;
    height: $--badge-height;
    line-height: $--badge-size;
    padding: 0 $--badge-padding;
    text-align: center;
    white-space: nowrap;
    border: $--border-2 solid $--color-white;
    @include when(fixed) {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);

      @include when(dot) {
        // right: 5px;
      }

      @include when(rb) {
        top: 100%;
      }

      @include when(lt) {
        right: 100%;
      }

      @include when(lb) {
        right: 100%;
        top: 100%;
      }
    }

    @include when(disabled) {
      color: $--color-text-3;
      background-color: $--color-fill-2;
    }

    @include when(dot) {
      height: 10px;
      width: 10px;
      padding: 0;
      right: 0;
      // border-radius: 50%;
      border-radius: $--border-radius-circle;

      @each $type in (success, warning, error, progress, info) {
        @include m($type) {
          @if $type == success {
            background-color: $--color-success;
          } @else if $type == warning {
            background-color: $--color-warning;
          } @else if $type == error {
            background-color: $--color-danger;
          } @else if $type == progress {
            background-color: $--color-primary;
          } @else {
            background-color: $--color-info3;
          }
        }
      }
    }
  }
}