.lego-search
  display: inline-block
  font-size: 15px
  position: relative

  &_full-width
    width: 100%

  &__container
    padding: 1px
    border: 1px solid rgba(#000, .2)

  &_multiple > &__container
    display: block
    overflow: auto

  &_active > &__container
    padding: 0
    border: 2px solid rgba(#fc0, .8)

  &__values
    display: flex
    align-items: center
    max-width: 100%
    padding: 0 4px
    box-sizing: border-box
    position: absolute
    left: 0
    top: 0
    right: 0
    bottom: 0

    &:after
      content: ''
      display: block
      clear: both

    .lego-search__unit
      float: left
      display: flex
      max-width: 100%
      background-color: #fef1bc
      padding: 3px 28px 3px 4px
      margin: 0 2px 0 0
      border-radius: 16px
      box-sizing: border-box

      &_type-department
        background-color: #c8dff9

      &_type-group
        background-color: #d2f8c7

      &_closable
        padding-right: 4px

      &-avatar
        display: block
        min-width: 21px
        width: 21px
        height: 21px
        margin-right: 6px

      &-name
        display: block

      &-close
        display: block
        min-width: 21px
        width: 21px
        height: 21px
        margin-left: 2px

  &_multiple &__values
    display: block
    position: static

    .lego-search__unit
      margin: 0 2px 2px 0

  &_editable &__values
    display: none

  .lego-input
    visibility: hidden

    &__container
      height: 34px
      border: none

  &_multiple .lego-input,
  &_editable .lego-input
    visibility: visible

  &__list
    background: #fff
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 10px 20px -5px rgba(0, 0, 0, .4)
    padding: 3px 0
    margin: 37px 2px 0
    position: absolute
    left: 0
    right: 0
    z-index: 5000

    &_empty
      padding-top: 0

    &-group-title
      color: rgba(0, 0, 0, .33)
      padding: 8px 12px 6px

    &-placeholder
      align-items: center
      padding: 12px 16px

  &__unit
    display: flex
    align-items: center

    &-avatar
      background-color: rgba(0, 0, 0, .05)
      background-position: 50% 50%
      background-size: cover
      background-repeat: no-repeat
      border-radius: 50%
      box-sizing: border-box
      flex-shrink: 0

    &-name
      max-width: 100%
      text-overflow: ellipsis
      white-space: nowrap
      overflow: hidden
      box-sizing: border-box

    &-close
      background: url('../../../static/i/cross.svg') 50% 50%/40% no-repeat
      border-radius: 50%
      box-sizing: border-box
      cursor: pointer

  &__list &__unit
    width: 100%
    height: 42px
    padding: 0 10px
    cursor: pointer
    box-sizing: border-box

    &:hover,
    &_active
      background-color: #f1f2f3

  &__list:hover &__unit_active
    background-color: transparent

    &:hover
      background-color: #f1f2f3

  &__list &__unit-avatar
    width: 30px
    height: 30px
    margin-right: 10px

  &__add-user
    color: #1c77e2
    border-top: 1px solid #ddd
    padding: 12px 16px
    margin-bottom: -3px
    cursor: pointer
