.entity-attribute-select
  +flex(flex-start, center)

.select-wrapper
  margin-left: 205px
  width: calc(100% - 225px)
  max-width: 500px

  .select-menu
    display: none

  .ui-selectmenu-button
    position: relative
    display: block
    font-size: 0.75rem
    line-height: 1.6
    padding: 8px
    border: 1px solid $lighter-gray
    border-radius: 3px
    color: $dark-gray
    background: $whitish

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

    &:after
      content: ''
      position: absolute
      right: 12px
      top: 17px
      width: 0
      height: 0
      border-style: solid
      border-width: 4px 5px 0 5px
      border-color: $darkBlue transparent transparent transparent
      opacity: 0.5

    &.dropdown-open
      &:after
        transform: rotate(180deg)

    .ui-icon
      display: none


.ui-selectmenu-menu
  display: none
  margin: 0

  &.ui-selectmenu-open
    display: block

  ul
    padding: 0
    margin: 0
    list-style: none
    border: 1px solid $lighter-gray
    background-color: white
    max-height: 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

      &.ui-state-focus
        background-color: $dark-white

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

        &.ui-state-active
          border: 1px solid transparent !important
          background-color: $dark-white
          color: $dark-gray