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

+host-styles('mp-smart-hub-dropdown')
  display inline

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

    mp-drop-menu
      top 10px
      z-index $z-dropdown

    .menu-caret-container
      position relative

      .menu-container
        background-color $grey-50
        border 1px solid $grey-150
        border-radius 5px
        overflow hidden

        .menu-header
          background-color $white
          border-bottom 1px solid $grey-200
          padding 24px 22px 18px

          .menu-title
            color $grey-700
            font-size-medium()
            font-weight $weight-bold

        .initial-loading
          align-items center
          display flex
          justify-content center
          height 300px

          mp-spinner
            height 100px
            width 100px

        .alerts-container
          max-height 510px
          overflow hidden
          overflow-y auto
          // Set to the same width as the individual alerts so that when the scroll bar shows,
          // it can't take more width
          width 100%

          .list-item:last-child
            border-bottom 0

          .deleted-alert
            animation collapse 0.25s linear forwards
            background-color $grey-50

          .pagination-loading
            display flex
            justify-content center
            padding 12px

            mp-spinner
              height 30px
              width 30px

          .menu-footer
            background-color white
            height 40px

        .empty-state
          align-items center
          animation fade-in 1s ease-in forwards
          color $grey-700
          display flex
          flex-direction column
          font-weight $weight-medium
          height 410px
          justify-content center
          opacity 0
          padding 20px 50px

          .empty-state-image
            margin-left 8px

          .empty-state-text
            align-items center
            animation fade-in 1s 1s ease-in forwards
            display flex
            flex-direction column
            margin-top 40px
            opacity 0

            .empty-state-text-primary
              color $grey-900
              font-size-large()
              font-weight $weight-bold
              margin-top 10px

            .empty-state-text-secondary
              color $grey-700
              font-size-default()
              font-weight $weight-medium
              margin-top 15px
              text-align center

    mp-tutorial-tooltip
      height 200px
      width 400px

      .tutorial-title
        color white
        font-size 16px
        font-weight bold

      .tutorial-content
        font-size 14px
        line-height 1.4
        margin-top 10px

@keyframes fade-in
  0%
    opacity 0
  100%
    opacity 1

@keyframes collapse
  100%
    height 0