.notifications {
  position: relative;

  &.unread-notifications {
    @include has-fa-icon(bell, solid);
    @include has-fa-icon(circle, solid, after);

    &::before {
      @include breakpoint(medium) {
        margin-right: 0;
      }
    }

    &::after {
      color: #ecf00b;
      font-size: rem-calc(10);
      margin-right: 0;
      position: absolute;
      left: 12px;
      top: 6px;

      @include breakpoint(medium) {
        left: auto;
        right: 8px;
      }
    }
  }

  &.no-notifications {
    @include has-fa-icon(bell, regular);
  }

  &::before {
    font-size: rem-calc(19);
  }

  &:hover {
    text-decoration: none;
  }
}

.notifications {
  $notification-icon-size: rem-calc(19);
  position: relative;

  &.unread-notifications {
    @include has-fa-icon(bell, solid);
    @include has-fa-icon(circle, solid, after);

    &::before {
      @include breakpoint(medium) {
        margin-right: 0;
      }
    }

    &::after {
      $menu-link-top-padding: rem-calc(11);
      $circle-icon-size: rem-calc(10);

      color: #ecf00b;
      font-size: $circle-icon-size;
      margin-right: 0;
      position: absolute;
      left: $notification-icon-size - rem-calc(5);
      top: $menu-link-top-padding - $circle-icon-size / 2;

      @include breakpoint(medium) {
        $menu-link-left-padding: rem-calc(16);
        left: $notification-icon-size + $menu-link-left-padding;
      }
    }
  }

  &.no-notifications {
    @include has-fa-icon(bell, regular);
  }

  &::before {
    font-size: $notification-icon-size;
  }

  &:hover {
    text-decoration: none;
  }
}

Adjust new notifications icon position
Adjust new notifications icon position

It was hard to know where the numbers were coming from; they depended on
the padding of the link and the size of the notification icon size. So
we're using variables to make it more explicit.

However, the code is now too complex, so we'll probably have to simplify
it in the future.
