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

+prefix-classes('mp-bm-')
  +host-styles(mp-bookmarks-widget)
    background-color $grey-100
    background-image linear-gradient($grey-50 0, $grey-100 100%)
    box-shadow 0 1px rgba(0, 0, 0, 0.05)
    box-sizing border-box
    height 54px
    width 145px

  .container, .container *
    box-sizing border-box

  .container
    color $grey-700
    display inline-flex
    flex-direction column
    height 100%
    position relative
    width 100%

    mp-upsell-popup
      left -460px
      position absolute
      top 86px

    .btn
      align-items center
      cursor pointer
      display inline-flex
      font-family $family-helvetica
      font-size-default()
      font-weight $weight-bold
      height 100%
      justify-content center
      user-select none
      width 100%

      svg-icon-style($grey-700, $grey-900)

      .btn-icon
        height 22px
        margin-right 4px

      &:hover
        background-color rgba(255, 255, 255, 0.35)
        color $grey-900

    .menu
      height 0
      position relative
      width 100%

      mp-drop-menu
        left initial
        right -8px
        top -10px

+prefix-classes('mp-bm-menu-') // @stylint ignore
  .container, .container *
    box-sizing border-box

  .container
    background-color $white
    border-radius 5px
    width 320px

    &.open
      display block

    mp-icon-input
      border-bottom 1px solid $grey-150
      display flex
      height 60px
      padding 12px 15px

    .list
      border-bottom-left-radius 5px
      border-bottom-right-radius 5px
      max-height 360px
      overflow-x hidden
      overflow-y auto
      position relative

      .list-item-divider
        background-color $grey-100
        height 1px
        margin 10px

      mp-list-item

        &:not([static])
          height 50px

        .empty
          font-style italic

        .section-header
          color $grey-700
          font-size-xs()
          font-weight $weight-bold

        .bookmark-row
          align-items center
          display flex
          flex 1

          .bookmark-details
            display flex
            flex 1
            flex-direction column
            min-width 0 // http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text

            .name, .creator
              font-size-default()
              max-width 260px
              overflow hidden
              text-overflow ellipsis
              white-space nowrap

            .name
              color $grey-700
              font-weight $weight-medium
              line-height 15px
              margin-bottom 4px

            .creator
              color $grey-300
              font-weight $weight-regular

        .delete-button
          flex none
          height 22px
          margin-right 6px
          opacity 0
          svg-icon-style($grey-200, $mp-red, speed: 0.1s)

        &:hover .delete-button
          opacity 1

        &[active='true'] .bookmark-row .bookmark-details
          .name
            color $mp-blue

          .creator
            color $grey-500

  .add
    align-items center
    display flex
    height 50px
    justify-content center
    position relative
    width 100%

    mp-button-bar
      height 100%

      .over-free-text
        left 13px
        position relative

    .upsell-icon
      left 72px
      position absolute
      svg-icon-style($mp-purple)
      top 15px

    mp-input-group
      border-top 1px solid $grey-200
      height 100%
      padding 6px
      width 100%

    mp-upsell-popup
      position fixed