// User notifications
// --------------------------------------------------

@import "../new_common/mixins";
@import "../new_common/sizes";

.UserNotifications {
  position:relative;
  @include display-flex();
  text-decoration: none!important;
}
.UserNotifications-Icon {
  color: #999;
  &:hover { color: #666 }
}
.UserNotifications-Count {
  position:absolute;
  display: block;
  @include opacity(0);
  top:-9px;
  right:-9px;
  width:17px;
  height:17px;
  background: #C74B43;
  border-radius: 23px;
  font-family:Arial;
  font-size: $sFontSmaller;
  font-weight: $sFontWeightDefault;
  text-align:center;
  line-height: $sLineHeightSmaller;
  color: #C74B43;
  @include transition(all, .5s, ease-in-out);
  @include transform(scale(0));
}
// States
.UserNotifications.has--alerts {
  .UserNotifications-Count {
    @include transition(all, .1s, ease-in-out);
    @include transform(scale(1));
    @include opacity(1);
    color: white;
  }
}
.UserNotifications.has--alerts:hover {
  .UserNotifications-Count {
    @include transition(all, .1s, ease-in-out);
    @include transform(scale(1.1))
  }
}



// User notifications
// --------------------------------------------------

@import "../new_common/mixins";
@import "../new_common/sizes";

.UserNotifications {
  position:relative;
  @include display-flex();
  text-decoration: none!important;
}
.UserNotifications-Icon {
  color: #999;
  &:hover { color: #666 }
}
.UserNotifications-Count {
  position:absolute;
  display: block;
  @include opacity(0);
  top:-9px;
  right:-9px;
  width:17px;
  height:17px;
  background: #C74B43;
  border-radius: 23px;
  font-family:Arial;
  font-size: $sFontSmaller;
  font-weight: $sFontWeightDefault;
  text-align:center;
  line-height: 17px; /* same as width/height */
  color: #C74B43;
  @include transition(all, .5s, ease-in-out);
  @include transform(scale(0));
}
// States
.UserNotifications.has--alerts {
  .UserNotifications-Count {
    @include transition(all, .1s, ease-in-out);
    @include transform(scale(1));
    @include opacity(1);
    color: white;
  }
}
.UserNotifications.has--alerts:hover {
  .UserNotifications-Count {
    @include transition(all, .1s, ease-in-out);
    @include transform(scale(1.1))
  }
}



Use same line-height as width/height
Use same line-height as width/height
