.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