.euiNotificationBadge {
  flex-shrink: 0; // Ensures it never scales down below its intended size
  display: inline-block;
  border-radius: $euiBorderRadius;
  font-size: $euiFontSizeXS;
  font-weight: $euiFontWeightMedium;
  line-height: $euiSize;
  height: $euiSize;
  min-width: $euiSize;
  padding-left: $euiSizeXS;
  padding-right: $euiSizeXS;
  vertical-align: middle;
  text-align: center;
  transition: all $euiAnimSpeedFast ease-in;
  cursor: default;

  $backgroundColor: $euiColorAccent;
  background: $backgroundColor;
  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
}

.euiNotificationBadge--medium {
  // Increase the default size a bit
  $size: $euiSize + $euiSizeXS;
  line-height: $size;
  height: $size;
  min-width: $euiSizeL;
}

.euiNotificationBadge--subdued {
  $backgroundColor: tint($euiColorLightShade, 30%);
  background: $backgroundColor;
  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
}