src/assets/e11-theme/components/_badge.scss
@mixin e11-badge() {

    $badge-border-radius: 18px;
    $badge-background: #90969F;
    $badge-color: $color-text;
    $badge-font-size: 1.5rem;
    $badge-padding: 4px 9px;
    $badge-shadow: 0 -1px 0 0 #E6EAEE;

    $badge-points-background: #7F8CA3;
    $badge-points-font-size: .9rem;
    $badge-points-font-size-medium: 1rem;

    .e11-badge {
      @extend .noselect;

      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: $badge-border-radius;
      font-size: $badge-font-size;
      padding: $badge-padding;
      background: $badge-background;
      color: $badge-color;
      box-shadow: $badge-shadow;
      cursor: default;
    }

    .e11-points-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $badge-points-background;
      color: $badge-color;
      border-radius: 10rem;
      font-size: $badge-points-font-size;
      font-weight: bold;
      line-height: normal;
      text-align: center;
      padding: .1rem .6rem;
      white-space: nowrap;
      cursor: default;

      .e11-icon {
        margin-right: .5rem;
        font-size: 1rem;
      }

      &[position="bottom"] {
        position: absolute;
        bottom: -.5rem;
      }
      &[size='medium'] {
        font-size: 1rem;
        padding: .2rem .7rem;

        .e11-icon {
          font-size: 1.1rem;
        }
      }

    }

}
