
.recent-mentions-header {
  h3 {
    margin: 0;
    div {
      font-size: 0.875rem;
      float: right;
      a:last-child { margin-left: 1rem; }
      @include media($mobile-portrait) { margin: 0.5rem 0; float: none; }
    }
  }
}
.recent-mentions {
  margin-bottom: 1.5rem;
  .mention {
    padding: 0.5rem;
    background-color: $sub-header-color;
    border-bottom: 1px solid $border-color;
    position: relative;
    .actions {
      position: absolute;
      top: 0;
      right: 0;
      height: 3.125rem;
      width: 2rem;
      div {
        width: 1rem;
        height: 1rem;
        position: absolute;
        right: 0.5rem;
        cursor: pointer;
        color: $secondary-font-color-dark;
        z-index: 999;
        &.delete { top: 15%; }
        &.marked { cursor: default; }
        &.marked, &.unmarked { top: 60%; }
        i { opacity: 0; }
        @include media($mobile) {
          i { opacity: 0.5; }
        }
      }
    }
    @include clearfix;
    @include span-columns(12);
    &:hover {
      background-color: darken($sub-header-color, 2%);
      .actions div {
        i { opacity: 0.5; }
        &:hover:not(.marked) i { opacity: 1; }
      }
    }
    &.dismissed, &.dismissed:hover {
      .mention-content .mention-header .mention-unread .dot {
        display: none;
      }
      background-color: transparent;
    }
    .mention-content {
      @include span-columns(12);
      color: $base-font-color;

      // max-width - padding - dot width - margin-right
      .mention-header {
        @include span-columns(12);
        height: 3.125rem;
        .mention-unread {
          float: left;
          margin-right: 0.5rem;
          width: 0.3125rem;
          height: 3.125rem;
          position: relative;
          .dot {
            height: 0.3125rem;
            width: 0.3125rem;
            border-radius: 100%;
            background-color: $color-primary;
            position: absolute;
            top: 50%;
          }
        }
        .avatar {
          float: left;
          margin-right: 0.5rem;
          img {
            float: left;
            height: 3.125rem;
            width: 3.125rem;
            border-radius: 100%;
            border: 2px solid $border-color;
            object-fit: cover;
          }
        }
        .msg {
          height: 3.125rem;
          padding-top: 0.5rem;
          line-height: 1rem;
          float: left;
          width: calc(100% - 6.4375rem);
          font-size: 0.875rem;
          div {
            display: inline-block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            @include media($mobile-portrait) {
              .hidden-mobile { display: none; }
            }
          }
        }
      }
      .mention-body {
        @include span-columns(12);
        font-size: 0.875rem;
        padding-left: 0.3125rem + 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        a:hover { color: $color-primary; }
      }
    }
  }
}
