.#{$n}-message-count {
  display: none;
  position: absolute;
  z-index: 1;
  top: $spacer * -0.5;
  right: $spacer * -0.5;
  align-items: center;
  justify-content: center;
  width: $messagecountsize;
  height: $messagecountsize;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition:
    transform $transition,
    opacity $transition;
  border-radius: 50%;
  opacity: 0;
  background-color: $negative;
  color: $white;
  font-size: $fontsize-small;
  font-weight: $fontweight-bold;
  line-height: 1;

  &.#{$n}-transition--visible {
    display: flex;
  }

  &.#{$n}-transition--in {
    transform: scale(1);
    opacity: 1;
  }
}