.picker
  display: inline-block
  box-sizing: border-box
  background-color: white
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2)
  outline: none

  &_focused
    box-shadow: 0 0 0 1px #fc0, inset 0 0 0 1px #fc0

  &_width_available
    width: 100%

  &__item
    cursor: pointer
    user-select: none
    padding: 2px
    flex: 0 1 auto
    box-sizing: border-box
    max-width: 100%

  &_multiple

    .picker__item
      max-width: 50%

  &_multiline
    min-height: 84px

  &__items
    display: flex
    flex-wrap: wrap

    padding: 4px

    &:empty
      display: none

.picker-item
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    align-items: center

    background-color: #bbccf1
    border-radius: 18px

    padding: 2px
    min-height: 18px

    &:hover
      background-color: #aec0e6

      &__title,
      &__close
        opacity: 1

    &_selected,
    &_selected:hover
      background-color: #8893cf
      color: #fff

      &.picker-item_type_user
        background-color: #fde481

      &.picker-item_type_group
        background-color: #aaed97

      &.picker-item_type_department
        background-color: #a4cbf4

    &_type_department
      background-color: #c8dff9

      &:hover
        background-color: #bad7f7

      .picker-item__avatar
        display: none

    &_type_group
      background-color: #d2f8c7

      &:hover
        background-color: #c8f7bb

    &_type_user
      background-color: #fef1bc

      &:hover
        background-color: #feeba0

    &__avatar
      flex 1 0 auto
      margin-right: -2px

    &__title
      flex: 1 1 auto
      overflow: hidden
      color: #000
      font-size: 13px
      line-height: 15px
      margin: 0 6px
      opacity: .85

      text-overflow: ellipsis
      white-space: nowrap

    &__close
      flex: 1 0 auto
      height: 8px
      width: 8px
      margin-right: 6px

      opacity: .5

      background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Imljb24tY2xvc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNHB4IiBoZWlnaHQ9IjE0cHgiIHZpZXdCb3g9IjAgMCAxNCAxNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+ICAgIDxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTE0LDAuN0wxMy4zLDBMNyw2LjNMMC43LDBMMCwwLjdMNi4zLDdMMCwxMy4zTDAuNywxNEw3LDcuN2w2LjMsNi4zbDAuNy0wLjdMNy43LDdMMTQsMC43eiIgLz48L3N2Zz4=') no-repeat 50% 50%
      background-size: cover
