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

+host-styles(mp-drop-menu)
  border-radius 5px
  display flex
  width 340px

+prefix-classes('mp-tag-input-')
  .container
    border-radius inherit
    width 100%

    &, *
      box-sizing border-box

    .top-input-wrapper
      margin 0 auto
      margin-bottom 20px
      padding 0 20px

      .input-wrapper
        align-items center
        cursor text
        display flex
        flex-direction row
        flex-wrap wrap
        justify-content flex-start
        min-height 36px
        padding 6px 6px 0
        position relative
        width 300px

        input:focus::-webkit-contacts-auto-fill-button
          display none
          height 0
          margin 0
          opacity 0
          padding 0
          width 0

        .mp-icon
          align-items center
          bottom 0
          display flex
          left 8px
          position absolute
          top -1px

          svg-icon-style($grey-500)

        mp-tag
          margin 0 0 6px 4px

        .border
          border 1px solid $grey-200
          border-radius 5px
          height 100%
          left 0
          pointer-events none
          position absolute
          top 0
          transition border-color 0.25s
          width 100%

          &.error
            border-color $mp-red

        &:active .border
          border-color $blue-500

        .search-input
          background-color transparent
          border 0
          font-family $family-helvetica
          font-size-default()
          font-style normal
          font-weight $weight-regular
          height auto
          line-height 1.5
          margin-bottom 7px
          margin-left 6px
          max-width 100%
          min-width 0
          padding 0

          &.empty
            padding-left 24px
            padding-top 1px

          &:focus + .border:not(.loaded-error)
            border-color $blue-500

    .empty
      font-style italic

  .search-input-dummy
    font-family $family-helvetica
    font-size-default()
    font-weight $weight-regular
    padding 0
    position absolute
    visibility hidden
    white-space nowrap