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

+prefix-classes('mp-dashboard-selector-')
  +host-styles(mp-dashboard-selector)
    box-sizing border-box

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

  .container
    width 320px

    .search-container
      border-bottom 1px solid mp-light-divider-color()
      padding 16px

      mp-icon-input
        width 100%

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

    .items-container
      max-height 400px
      overflow-y auto
      position relative

      .empty-state
        color mp-tertiary-text-color()
        font-size 13px
        font-style italic
        padding 16px 0
        text-align center

      .divider
        border-bottom 1px solid mp-light-divider-color()
        margin 0 20px

      section
        padding 10px 0

        .section-header
          color mp-primary-text-color()
          font-size 11px
          font-weight bold
          padding 10px 20px
          text-transform uppercase

        .item-row
          align-items center
          border-radius 4px
          cursor pointer
          display flex
          height 50px
          margin 0 10px
          padding 0 10px

          &.active
            background-color mp-menu-item-background-color()

            .checkbox
              border-color mp-control-primary-color()

            .text
              .title
                color mp-control-primary-color()

            /* disable star action, pending design decision
            .action.action // specificity hack to override display: none
              display block
            */

          .checkbox
            background-color $white
            border 1px solid mp-dark-divider-color()
            border-radius 3px
            height 18px
            margin-right 10px
            svg-icon-style($white)
            width 18px

            &.checked
              background-color mp-control-primary-color()
              border-color mp-control-primary-color()

            svg-icon
              margin -3px 0 0 -3px

          .text
            flex 1 0
            font-weight 500
            min-width 0

            .placeholder
              font-weight normal

            .title
              color mp-primary-text-color()
              font-size 13px
              line-height 16px
              truncate-text()

            .description
              color mp-tertiary-text-color()
              font-size 12px
              line-height 16px
              truncate-text()

          .action
            padding 14px 10px

            .icon.icon // specificity hack to override svg-icon-style()'s display: inline-block
              display block

            &.star
              display none
              margin-right -10px
              svg-icon-style($grey-300, mp-control-primary-color())

          &.starred
            .action.star
              display block
              pointer-events none // disable star action, pending design decision
              svg-icon-style(mp-star-favorite-color(), mp-control-primary-color())

          &.disabled
            pointer-events none

            .checkbox
              &.checked
                background-color $grey-300
                border-color $grey-300

    .busy
      align-items center
      background-color $grey-50
      border-top 1px solid mp-light-divider-color()
      display flex
      height 50px
      justify-content center

    .create-field
      border-top 1px solid mp-light-divider-color()
      height 50px
      padding 6px

      mp-input-group
        height 100%
        width 100%