.header-notification-count
  position: absolute
  +media-breakpoint-up(md)
    +position(right .25rem, top .25rem)
  +media-breakpoint-down(sm)
    +position(right .125rem, top .125rem)
  &.is-loading.a-notification-count
    background-color: transparent
  &.is-loading::before
    content: ' .'
    color: var(--default-text)
    animation: dots 1s steps(5, end) infinite
    +text-block(1rem 1)
    +position(absolute, left .25rem, bottom .25rem)

@keyframes dots
  0%, 20%
    color: var(--transparent-text)
    text-shadow: .25em 0 0 var(--transparent-text), .5em 0 0 var(--transparent-text)
  40%
    color: var(--default-text)
    text-shadow: .25em 0 0 var(--transparent-text), .5em 0 0 var(--transparent-text)
  60%
    text-shadow: .25em 0 0 var(--default-text), .5em 0 0 var(--transparent-text)
  80%, 100%
    text-shadow: .25em 0 0 var(--default-text), .5em 0 0 var(--default-text)

.header-notifications-item__body
  width: 100%
  +media-breakpoint-up(md)
    color: var(--default-text)
  +media-breakpoint-down(sm)
    color: var(--reversal-text)

.header-notifications-item__user-icon
  float: left
  +size(2rem)
  margin-right: .5rem
  margin-bottom: .25rem

.header-notifications-item__message
  p
    line-height: 1.45
    margin-bottom: .375em
    +media-breakpoint-up(md)
      font-size: .8125rem
    +media-breakpoint-down(sm)
      font-size: .75rem

.header-notifications-item__created-at
  text-align: right
  display: block
  +media-breakpoint-up(md)
    font-size: .75rem
  +media-breakpoint-down(sm)
    font-size: .625rem
