.euiHeaderSectionItemButton {
  position: relative; // For positioning the notification
  height: $euiHeaderChildSize;
  min-width: $euiHeaderChildSize;
  text-align: center;
  font-size: 0; // aligns icons better vertically
}

.euiHeaderSectionItemButton__notification {
  position: absolute;

  &--dot {
    top: 0;
    right: 0;
    stroke: $euiHeaderBackgroundColor;
  }

  &--badge {
    top: 9%;
    right: 9%;
    box-shadow: 0 0 0 1px $euiHeaderBackgroundColor;
  }
}

.euiHeaderSectionItemButton__content {
  // This element is a span and we're changing the display because inline elements can’t take a transform
  display: inline-block;
}

@include euiBreakpoint('xs') {
  .euiHeaderSectionItemButton {
    min-width: $euiHeaderChildSize * .75;
  }

  // Using specificity to override the default icon size
  .euiHeaderSectionItemButton__notification.euiHeaderSectionItemButton__notification--dot {
    @include size($euiSize);
    top: 9%;
  }
}