.badge {
  @include font-style('body--m');

  @include text-ellipsis;
  border-radius: $badge-width / 2;
  height: $badge-width;
  line-height: $badge-line-height;
  min-width: $badge-width;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .icon {
    flex-shrink: 0;
  }

  &--s {
    @include font-style('body--xs');
    border-radius: 50%;
    height: $badge-s-width;
    line-height: $badge-s-line-height;
    min-width: $badge-s-width;
  }

  &--l {
    padding: 0 15px;
  }

  &--xl {
    height: 40px;
    padding: 0 15px;
    border-radius: 20px;
  }
}

.badge__text {
  @include text-ellipsis;
}

@include badge-color-mapping;