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

@keyframes changeAddToDashColor
  from
    color $green-300
    fill $green-300
  to
    color $grey-700
    fill $grey-700

+prefix-classes('mp-add-to-dash-')
  .container, .container *
    box-sizing border-box

  .container
    position relative

    .icon
      position relative

      .upsell-icon
        position absolute
        right -6px
        top -5px

    &.type-segmentation, &.type-retention
      .btn
        padding 14px
        svg-icon-style($grey-700, $mp-blue)

        .upsell-icon
          svg-icon-style($mp-purple, size: 16px)

        &:hover
          background-color alpha($white, 0.35)

      mp-drop-menu
        cursor default
        top -8px

    &.type-funnel-query, &.type-funnel-conversion
      .btn
        svg-icon-style($grey-500, $mp-blue)

        .upsell-icon
          svg-icon-style($mp-purple, size: 16px)

        &:hover
          background-color alpha($white, 0.35)

      mp-drop-menu
        cursor default
        top -1px

    &.type-insights
      .btn
        height 25px
        padding 5px
        svg-icon-style($grey-500, $mp-blue)

        .upsell-icon
          svg-icon-style($mp-purple, size: 16px)

      mp-drop-menu
        cursor default
        top 8px

    mp-upsell-popup
      left -290px
      position relative
      top 34px

    mp-tutorial-tooltip
      height 124px
      text-align left
      top calc(50% - 60px)

      .tutorial-title
        color $white
        font-size 16px

      .tutorial-content
        color $white
        font-size-medium()
        line-height 1.7
        margin-bottom 10px
        margin-top 5px
        opacity 0.7

      &:hover
        path
          opacity 1

      path
        opacity 0.7


    .inner-container
      position relative

      &[disabled='true']
        cursor default
        opacity 0.6
        pointer-events none

      mp-tooltip
        white-space nowrap

      .btn
        cursor pointer
        display flex

        &.added
          svg-icon-style($green-300)

          svg, path
            animation changeAddToDashColor 200ms forwards 3.3s

      .menu
        position relative

        mp-drop-menu
          left inherit
          position absolute
          right -6px

          .menu-contents
            width 340px

        .loading
          display flex
          flex-direction row
          height 130px
          justify-content center
          width 340px

          .spinner
            display flex
            flex-direction column
            height 100%
            justify-content center

            mp-spinner
              height 30px
              width 30px

        .title
          padding 20px 12px 16px

          .header
            color $grey-900
            display flex
            margin-left 6px

            svg-icon-style($green-300, size: 23px)

            .header-text
              display inline-block
              font-size 16px
              font-weight bold
              margin auto 0
              padding-left 8px

          .subtext
            color $grey-700
            display flex
            flex-direction row
            font-size 12px
            font-weight 500
            justify-content flex-start
            line-height 1.5
            margin 2px 0 6px 38px

            &.no-icon
              margin-left 15px

            mp-spinner
              height 12px
              padding 5px
              position relative
              top -2px
              width 12px

            .dashboard-icon
              display flex
              position relative
              svg-icon-style($grey-300, size: 22px)
              top -2px

            .saved-icon
              display flex
              position relative
              svg-icon-style($green-300, size: 22px)
              top -2px

            .error-icon
              display flex
              padding-left 2px
              position relative
              svg-icon-style($mp-red, size: 20px)
              top -2px

        mp-tag-selector
          z-index $z-base

    &[not-implemented='true']:hover
      .disabled-tooltip
        display flex

    .disabled-tooltip
      background-color $grey-900
      border-radius 5px
      box-shadow 0 10px 15px 0 alpha(black, 0.1), 0 15px 30px 0 alpha(black, 0.2)
      display none
      flex-direction row
      justify-content space-around
      left -375px
      opacity 1
      padding 18px 14px 20px 24px
      position absolute
      top 51px
      width 432px
      z-index $z-tooltip

      .disabled-tooltip-icon
        background url(/site_media/images/reports/support-dash.png) no-repeat
        position relative
        top 4px
        width 63px

      .disabled-tooltip-text
        color $white
        font-family $family-helvetica
        font-size-default()
        font-weight $weight-medium
        line-height 1.38
        text-align left