.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


  .explanation
    margin-left: 45px

.c-multi-select-item
  position: relative
  margin: 5px 0
  min-height: 42px
  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
  +flex(flex-start, center)

  &:first-child
    margin-top: 10px

  &.is-ghost
    filter: blur(0.5px)
    animation: shake1 1s infinite alternate
    background-color: rgba($lighter-gray, 0.2)


.c-multi-select-item__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")

  .c-multi-select-item.readonly &
    display: none

.c-multi-select-item__value
  width: calc(100% - 30px)

.c-multi-select-item__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

  .c-multi-select-item.readonly &
    display: none




.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