@import "../common/variables";
@import "../common/mixins";

.@{css-prefix} {
  &-badge {
    color: @badge-default-color;
    font-size: 12/20rem;
    position: relative;
    display: inline-block;
    border-radius: 1000px;
    line-height: 1;
    padding: 3px 6px;
    white-space: nowrap;
    background-color: @badge-default-bg;
  }

  &-badge-radius {
    border-radius: 2px;
    &:after {
      border-radius: 2px;
    }
  }

  &-badge-primary {
    background-color: @badge-primary-bg;
    color: #FFF;
  }

  &-badge-danger {
    background-color: @badge-danger-bg;
    color: #FFF;
  }

  &-badge-warning {
    background-color: @badge-warning-bg;
    color: #FFF;
  }

  &-badge-hollow {
    background-color: @badge-hollow-bg;
    color: @badge-hollow-color;
    &:after {
      content: '';
      width: 200%;
      height: 200%;
      border: 1px solid @badge-hollow-color;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 1rem;
      transform-origin: 0 0;
      transform: scale(.5);
    }
  }

  &-badge-radius:after {
    border-radius: 2px;
  }
}