@mixin badge-theme($color) {
  @include e(sup) {
    background-color: $color;
  }
}

@include b(badge) {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  @include badge-theme(var(--theme-default));

  @include m(primary) {
    @include badge-theme(var(--theme-primary));
  }

  @include m(info) {
    @include badge-theme(var(--theme-info));
  }

  @include m(success) {
    @include badge-theme(var(--theme-success));
  }

  @include m(warning) {
    @include badge-theme(var(--theme-warning));
  }

  @include m(error) {
    @include badge-theme(var(--theme-error));
  }

  @include e(sup) {
    display: flex;
    justify-content: center;
    align-items: center;
    top: auto;
    font-size: var(--badge-font-size);
    color: #fff;
    height: var(--badge-height);
    padding: 0 var(--badge-padding-h);
    white-space: nowrap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    @include m(up) {
      position: absolute;
      top: 0;
      right: 0;
      transform: translateX(50%) translateY(-50%);
    }
  }

  @include m(dot) {
    @include e(sup) {
      width: var(--badge-dot-diameter);
      height: var(--badge-dot-diameter);
      padding: 0;
      border-radius: var(--radius-circle);
    }
  }

  @include m(rect) {
    @include e(sup) {
      border-radius: 0;
    }
  }

  @include m(radius) {
    @include e(sup) {
      border-radius: var(--badge-radius-radius);
    }
  }

  @include m(round) {
    @include e(sup) {
      border-radius: var(--badge-round-radius);
    }
  }

  @include m(circle) {
    @include e(sup) {
      width: var(--badge-height);
      padding: 0;
      border-radius: var(--badge-round-radius);
    }
  }

  @include m(leaf) {
    @include e(sup) {
      min-width: var(--badge-height);
      border-radius: var(--radius-round) var(--radius-round) var(--radius-round) 0;
    }
  }
}