$prefixCls: za-badge;

@mixin badge-theme($color) {
  .#{$prefixCls} {
    &-sup {
      background-color: $color;
    }
  }
}

.#{$prefixCls} {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  @include badge-theme($theme-default);

  &.theme-primary {
    @include badge-theme($theme-primary);
  }

  &.theme-info {
    @include badge-theme($theme-info);
  }

  &.theme-success {
    @include badge-theme($theme-success);
  }

  &.theme-warning {
    @include badge-theme($theme-warning);
  }

  &.theme-error {
    @include badge-theme($theme-error);
  }

  &-sup {
    display: flex;
    justify-content: center;
    align-items: center;
    top: auto;
    font-size: r(12);
    color: #fff;
    height: r(19);
    padding: 0 r(5);
    white-space: nowrap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

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

  &.shape-dot {
    .#{$prefixCls}-sup {
      width: r(8);
      height: r(8);
      padding: 0;
      border-radius: 100%;
    }
  }

  &.shape-radius {
    .#{$prefixCls}-sup {
      border-radius: r(4);
    }
  }

  &.shape-round {
    .#{$prefixCls}-sup {
      min-width: r(19);
      border-radius: r(19);
    }
  }

  &.shape-circle {
    .#{$prefixCls}-sup {
      width: r(19);
      padding: 0;
      border-radius: r(19);
    }
  }
}