// Notifications.

.esNotf
  [class^=icon-],
  [class*= icon-]
    background: hsl($uiHue, 85%, 67%);
    color: white;
    //height: 22px;
    //width: 22px;
    //line-height: 22px;
    border-radius: 50%;
    margin-right: 1ex;
    display: inline-block;

  .icon-char, // like a Fontello icon, but a plain ascii character
  [class^="icon-"]:before,
  [class*=" icon-"]:before
    height: 1.5em;
    width: 1.4em;
    line-height: 1.4em;
    padding-left: 0.3em;
    margin-right: 0.3em;
    margin-left: 0;

  .icon-char
    width: 1.56em;
    padding-left: 0;
    font-weight: bold;
    opacity: 1;

  .icon-mail-empty:before,
  .icon-comment-empty:before
    font-weight: bold;

  .icon-heart::before
    position: relative;
    top: 3px; // v-aligns inside background
    vertical-align: middle;

  // Make stuff directly to me darker (e.g. direct replies, mentions).
  &.esNotf-toMe
    [class^=icon-],
    [class*= icon-]
      background: hsl($uiHue 95% 45%);

  // But remove colors if the notf has been seen already
  &.esNotf-seen
    [class^=icon-],
    [class*= icon-]
      background: hsl(0, 0%, 73%);

  // Indirect replies color, let's be in between.
  .s_Nf-2Me-Indr:not(.esNotf-seen) .icon-reply
    background: hsl($uiHue 85% 62%);


.esNotf
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;


.esNotf_page
  font-style: italic;

