.entity-attribute-autocomplete-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: 205px
    max-width: 400px
    padding-top: 10px

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

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

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


    .dropdown
      position: absolute
      right: 1px
      top: 11px
      width: 39px
      height: calc(100% - 12px)
      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: 205px
    max-width: 400px
    padding: 10px 0

    .item
      margin: 0 0 5px
      font-size: 0.7rem
      line-height: 1.2
      color: $medium-gray
      padding: 10px 15px
      background-color: $whitish
      cursor: pointer
      border-radius: 3px

      &:before
        content: ''
        display: inline-block
        height: 10px
        width: 10px
        margin-right: 10px
        background:
          image: url("/img/kms/icons/icon_cross_red.svg")
          position: center
          size: contain
          repeat: no-repeat

      &:hover:not(.readonly)
        background-color: lighten($neonRed, 10%)
        color: white

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

      &.readonly
        &:before
          display: none

  .explanation
    margin-left: 205px

.ui-menu.ui-autocomplete
  padding: 0
  margin: 0
  list-style: none
  border: 1px solid $lighter-gray
  background-color: white
  max-height: 500px
  max-width: 400px
  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