@include b(badge) {
  @include define(dot-size, 8px);
  @include define(color, var(--za-theme-danger));
  @include define(text-color, #fff);
  @include define(border-color, #fff);
  @include define(font-size, 12px);
  @include define(font-weight, 600);
  @include define(height, 20px);
  @include define(padding-horizontal, 4px);
  @include define(border-radius, var(--za-radius-sm));
  @include define(top, 0);
  @include define(right, 0);

  position: relative;
  display: inline-block;
  vertical-align: middle;

  @include b(icon) {
    color: inherit;
  }

  @include e(content) {
    display: flex;
    justify-content: center;
    align-items: center;
    top: auto;
    background-color: var(--color);
    color: var(--text-color);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    height: var(--height);
    padding: 0 var(--padding-horizontal);
    white-space: nowrap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  @include m(dot) {
    @include define(height, var(--dot-size));

    @include e(content) {
      width: var(--height);
      border-radius: 50%;
      padding: 0;
    }
  }

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

  @include m(round) {
    @include e(content) {
      min-width: var(--height);
      border-radius: var(--height);
    }
  }

  @include m(circle) {
    @include e(content) {
      width: var(--height);
      border-radius: 50%;
      padding: 0;
    }
  }

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

  @include m(sup) {
    @include define(font-size, 10px);
    @include define(height, 16px);

    @include m(dot) {
      @include define(height, var(--dot-size));
    }

    @include e(content) {
      position: absolute;
      top: var(--top);
      right: var(--right);
      transform: translate3d(calc(100% - var(--height) / 2), -50%, 0);
    }
  }

  @include m(bordered) {
    @include e(content) {
      border: 1px solid var(--border-color);
    }
  }
}