.x-notification-badge-container {
  @extend %d-flex,
          %justify-content-center,
          %align-items-center;

  position: relative;
  min-height: 2.5em;
  &.small-badge {
    min-height: 2em;
  }
}

$height: 1.35em;
$small-height: $height/1.4;
.badge-rounded {
  @extend %font-size-sm,
          %d-flex,
          %align-items-center,
          %justify-content-center;

  padding: 0 3px;
  border-radius: $height/2;
  height: $height;
  min-width: $height;
  &.small-badge {
    height: $small-height;
    min-width: $small-height;
    border-radius: $small-height/2;
    padding: 0;
  }
}

.badge-notification {
  @include x-badge-variant(theme-color("danger"), white, 1);
  font-weight: $font-weight-bold;

  .x-notification-badge-container &.badge {
    position: absolute;
    top: 0;
    left: 55%;
  }
}

.x-notification-group-header {
  @extend %text-grey;
}