@badge-prefix: ~'@{icecream-prefix}-badge';

.@{badge-prefix} {
  position: relative;
  display: inline-block;

  &-count, &-dot {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    transform-origin: 100% 0;
    box-shadow: 0 0 0 1px #fff;
  }

  &-count {
    .extendBaseEnhanced();
    z-index: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    color: #fff;
    font-weight: 400;
    .setFontSize(@icecream-font-size-sm);
    line-height: 20px;
    white-space: nowrap;
    text-align: center;
    background: @icecream-color-red-6;
    border-radius: 10px;

    &-small {
      min-width: 14px;
      height: 14px;
      padding: 0 3px;
      .setFontSize(@icecream-font-size-sm);
      line-height: 14px;
    }
  }

  &-dot {
    background: @icecream-color-red-6;
    border-radius: 100%;
    padding: 0;
    height: 6px;
    width: 6px;
    min-width: 6px;
  }

  &-success {
    background: @icecream-success-color;
  }

  &-primary {
    background: @icecream-primary-color;
  }

  &-warning {
    background: @icecream-warning-color;
  }
}