@import '../../../stylesheets/defaults'

+prefix-classes('mp-sh-notif-')
  .notification
    position relative

    .container
      background-color white
      border-bottom solid 1px $grey-150
      cursor pointer
      font-size-default()
      font-weight $weight-regular
      line-height 1.4
      margin-bottom 7px
      padding 16px 22px 20px

      &.last-item
        margin-bottom 0

      .actions
        align-items center
        display flex
        justify-content space-between
        margin-top 22px

        .detail-link
          align-items center
          color $blue-700
          display flex
          svg-icon-style(base-color: $blue-700, size: 22px)

      .explains div
          margin-top 10px

      .header
        align-items center
        color $grey-300
        display flex
        font-family $family-helvetica
        font-size-xs()
        font-weight $weight-bold
        margin-bottom 15px

        .relative-timestamp
          text-transform none
          white-space nowrap

        .remove
          cursor pointer
          display flex
          margin-top 3px
          svg-icon-style($grey-300, $red-300, speed: 0.2s, size: 22px, pos-left: 6px)

        .spacer
          flex 1

      .unread-indicator
        border-color $mp-yellow transparent transparent transparent
        border-style solid
        border-width 16px 16px 0 0
        height 0
        left 0
        position absolute
        top 0
        width 0

    .explains-indicator
      align-items center
      background-color white
      display flex
      margin-bottom 1px
      padding 8px 22px

      .highlight-tag
        border solid thin $mp-blue
        border-radius 4px
        color $mp-blue
        display flex
        font-size 8px
        letter-spacing 0.5px
        padding 2px 4px 0 3px
        svg-icon-style($mp-blue, size: 10px, pos-top: -1px)
        text-transform uppercase

        .highlight-tag-text
          margin-left 2px

      .explains-indicator-text
        color $grey-300
        font-size 10px
        font-weight $weight-medium
        margin-left 10px

.mp-sh-notif-body
  .mp-sh-alert-keyword
    color $grey-700
    font-weight $weight-medium