.chat-badge {
  border-radius: 100%;
  position: absolute;
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 10px;
  text-align: center;
  background-color: #818282;
  text-align: center;
  color: #fff;
  animation-name: ChatBounceIn;
  animation-duration: 0.75s;

  &.top-left {
    left: 0;
    top: -4px;
  }

  &.top-right {
    right: 0;
    top: -4px;
  }

  &.bottom-left {
    left: 0;
    bottom: -4px;
  }

  &.bottom-right {
    right: 0;
    bottom: -4px;
  }

  &.middle-right {
    top: 0;
    bottom: 0;
    right: 6px;
    margin: auto;
  }

  &.middle-left {
    top: 0;
    bottom: 0;
    left: 6px;
    margin: auto;
  }

  &.badge-secondary {
    background-color: $chat-secondary;
  }

  &.badge-danger {
    background-color: $chat-danger;
  }

  &.badge-small {
    width: 8px !important;
    height: 8px !important;
    top: -3px;
    right: -3px;
  }
}