.fizz-notification,
.fizz-notification-bordered {
  position: relative;
}

.fizz-notification:after,
.fizz-notification-inline:after,
.fizz-notification-bordered:after {
  content: attr(data-counter);
  display: block;
  width: $spacing-20;
  height: $spacing-20;
  background-color: $color-background-brand-secondary;
  text-align: center;
  border-radius: 50%;
  border: $border-width-thick solid transparent;
  font-size: $text-small-font-size;
  line-height: $spacing-16;
  font-weight: $font-weight-semibold;
  position: absolute;
  color: $color-text-inverse;
  top: -#{$spacing-8};
  right: -#{$spacing-8};
}

.fizz-notification-bordered:after {
  border-color: $color-white;
}

.fizz-icon-button-small.fizz-notification:after {
  top: -#{$spacing-8};
  right: -#{$spacing-8};
}

.fizz-notification-inline {
  display: inline-flex;
  align-items: center;
}

.fizz-notification-inline:after {
  position: static;
  display: inline-block;
  margin-left: $spacing-8;
}

.fizz-marker {
  position: relative;
}
.fizz-marker:before {
  content: "";
  display: block;
  border-radius: 50%;
  background-color: $color-background-brand-secondary;
  width: $spacing-8;
  height: $spacing-8;
  position: absolute;
  top: calc((1em * 1.5) / 4);
  left: -20px;
}