.entity-attribute-multiselect-combo-box
  color: #000000

  //Read only items below this line
  ul
    list-style-type: none
    padding-left: 0
    margin: 0
    li
      font-size: 0.7rem
      color: #32343a
      opacity: 0.5
      &:before
        content: "-"
        margin-right: 5px


  //Non read only items below this line
  .ui-widget
    position: relative
    margin-left: 45px
    max-width: 500px

    input
      display: block
      height: auto
      min-height: 40px
      padding: 8px
      font-size: 0.75rem
      margin-left: 0
      line-height: 1.6
      border: 1px solid $lighter-gray
      border-radius: 3px
      text-indent: 0
      color: $dark-gray
      background: white

      &.ui-autocomplete-input.hidden
        display: none

      &:focus
        outline: none
        border-color: rgba($brand-primary, 0.75)


    .dropdown
      position: absolute
      right: 1px
      top: 0
      width: 39px
      height: 100%
      background-color: rgba($lightest-gray, 0.5)
      border-radius: 0 3px 3px 0
      cursor: pointer
      +flex(center, center)

      &.hidden
        display: none

      &:after
        content: ''
        display: block
        border-style: solid
        border-width: 4px 5px 0 5px
        border-color: $darkBlue transparent transparent transparent
        opacity: 0.5
  .items
    margin-left: 50px
    max-width: 490px
    padding: 0

    .item
      position: relative
      margin: 10px 0
      font-size: 0.7rem
      line-height: 1.2
      color: $medium-gray
      padding: 5px 35px 5px 15px
      border: solid 1px $lighter-gray
      background-color: white
      border-radius: 5px
      min-height: 40px
      +flex(flex-start, center)

      .remove
        position: absolute
        right: 0
        top: 0
        +flex(center, center)
        width: 35px
        height: 100%
        border-radius: 0 3px 3px 0
        cursor: pointer
        background-color: transparent
        transition: background-color 0.1s

        &:after
          content: ''
          display: block
          width: 20px
          height: 20px
          background:
            image: url("/img/kms/icons/icon_cross_red.svg")
            position: center
            size: 50%
            repeat: no-repeat

        &:hover
          background-color: lighten($neonRed, 10%)

          &:after
            background-image: url("/img/kms/icons/icon_cross.svg")


      .text
        width: calc(100% - 30px)

      .drag-icon
        width: 30px
        height: 30px
        +flex(flex-start, center)
        cursor: move
        &.hidden
          display: none

        &:after
          content: ''
          background:
            position: center
            repeat: no-repeat
            size: contain
            image: url("/img/kms/icons/drag-dots.svg")
          width: 9px
          height: 16px
          opacity: 0.2


      &.readonly
        .remove
          display: none


  .explanation
    margin-left: 45px

.ui-menu.ui-autocomplete
  padding: 0
  margin: 0
  list-style: none
  border: 1px solid $lighter-gray
  background-color: white
  max-height: 500px
  max-width: 500px
  overflow: hidden
  overflow-y: scroll

  &.ui-widget.ui-widget-content
    border-top: none



  li
    font-size: 0.7rem
    line-height: 1.6
    color: $dark-gray

    //Uncomment if selectmenu renders without div
    //border: none !important
    //padding: 4px 8px

    //Comment if selectmenu renders without div
    div
      padding: 4px 8px

      &.ui-state-active
        border: none !important
        background-color: $dark-white
        color: $dark-gray
        margin: 0 !important