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

+host-styles('mp-smart-hub-alert')
  display inline-flex
  width 360px

+prefix-classes('mp-sh-alert-')
  .container
    width 100%

  .content
    background-color $white
    display flex
    flex-direction column
    padding 12px 25px 12px 46px
    position relative
    transition background-color 0.25s

    &.unread
      background-color rgba($blue-100, 0.05)

    .header
      align-items center
      display flex
      position relative

      .type-icon
        align-items center
        display flex
        height 100%
        left -26px
        position absolute

        svg
          display block

          path#arrow
            fill white

        &.type-anomaly
          svg path#disc
            fill $mp-yellow

        &.type-contour
          svg path#disc
            fill $mp-green

      .header-text
        flex 1

        .header-alert-type
          color $grey-900
          font-weight $weight-bold
          font-size-default()

        .header-report-type
          color $grey-900
          font-size-default()
          font-weight $weight-regular

      .remove
        cursor pointer
        display flex
        opacity 0
        position relative
        right -5px
        svg-icon-style($grey-300, $red-300, speed: 0.2s, size: 22px)
        transition opacity 0.25s

    .message
      color $grey-700
      font-size-default()
      font-weight $weight-medium
      margin 6px 0
      text-align start
      white-space normal
      word-wrap break-word

      .keyword
        color $grey-900

    .footer
      align-items center
      display flex
      flex-direction row
      height 26px
      justify-content space-between

      .footer-time
        color $grey-500
        display flex
        flex-direction column
        font-size-small()
        font-weight $weight-regular
        justify-content center

    &.in-report
      .header
        .remove
          opacity 1

    &:not(.in-report):hover
      background-color $grey-50
      text-decoration none

      .header
        .remove
          opacity 1