// Form - autocompleter
//
// Located in `wyrm_core/_autocompleter.sass`. Autocompleters traditionally have three states, empty,
// single item and multi-item addition. Examples for all three are shown below.
//
// Markup:
// <div class="wy-control-group">
//   <label for="right-label" >Empty state</label>
//   <div class="wy-control">
//     <div class="wy-tag-input-group">
//       <div class="wy-autocomplete-group">
//         <label class="fa fa-search" for="search-example-1"></label> <input type="text" id="search-example-1" placeholder="Search users">
//       </div>
//     </div>
//     <span class="wy-form-message">Example help text</span>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label for="right-label" >One item allowed</label>
//   <div class="wy-control">
//     <div class="wy-tag-input-group">
//       <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span>
//     </div>
//     <span class="wy-form-message">User needs to close the above item before choosing a replacement.</span>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label for="right-label" >Multiple items allowed</label>
//   <div class="wy-control">
//     <div class="wy-tag-input-group">
//       <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span>
//       <span class="wy-tag">Rollerball<a href="" class="wy-tag-remove"></a></span>
//       <span class="wy-tag on">Being There<a href="" class="wy-tag-remove"></a></span>
//       <div class="wy-autocomplete-group">
//         <label class="fa fa-search" for="search-example-2"></label> <input type="text" id="search-example-2" placeholder="Search users">
//         <div class="wy-autocomplete-dropdown">
//           <ul>
//             <li class="on">
//               Network
//             </li>
//             <li>
//               Rollerball
//             </li>
//             <li>
//               Being There
//             </li>
//             <li class="add">
//               <span class="fa fa-plus-circle"></span> Add new entry
//             </li>
//           </ul>
//         </div>
//       </div>
//     </div>
//     <span class="wy-form-message">Infinite autocomplete.</span>
//   </div>
// </div>
//
// Styleguide 9

.wy-autocomplete-group
  display: inline-block
  position: relative
  background: $input-background-color

.wy-autocomplete-dropdown
  position: absolute
  top: 100%
  left: 0
  float: left
  min-width: 100%
  background: $dropdown-color
  z-index: $z-index-dropdown
  border: solid 1px $dropdown-border-color
  box-shadow: 0 5px 5px 0 rgba(0,0,0,.1)
  ul
    list-style: none !important
    margin: 0 !important
  li
    line-height: 1.5
    padding: $base-font-size / 2
    cursor: pointer
    list-style: none !important
    margin: 0 !important
    border-bottom: solid 1px $table-border-color
    &:last-child
      border-bottom: none
    &.on, &:hover
      background: $link-color
      border-color: transparent
      color: $white
    &.add
      background: lighten($green, 50%)
    &:hover.add, &.add.on
      background: $green
  img
    width: 16px
    height: 16px
    margin-right: $base-font-size / 2

.wy-tag-input-group
  .wy-autocomplete-dropdown
    margin-top: -4px

// Form - Autocompleter, many items.
//
// For when there are lots of items in a tag group.
//
// Markup:
// <div class="wy-control-group wy-control-group-relation">
//   <label>Lots of items</label>
//   <div class="wy-control">
//     <div class="wy-tag-input-group wy-tag-input-group-many">
//     <ol>
//       <li><span class="fa fa-ellipsis-v">Network <a class="fa fa-times-circle"></a></span></li>
//       <li><span class="fa fa-ellipsis-v">Rollerball <a class="fa fa-times-circle"></a></span></li>
//       <li><span class="fa fa-ellipsis-v">The Godfather <a class="fa fa-times-circle"></a></span></li>
//       <li><span class="fa fa-ellipsis-v">The Godfather Part II<a class="fa fa-times-circle"></a></span></li>
//       <li><span class="fa fa-ellipsis-v">The Big Lebowski <a class="fa fa-times-circle"></a></span></li>
//       <li><span class="fa fa-ellipsis-v">Fargo <a class="fa fa-times-circle"></a></span></li>
//       <li><span class="fa fa-ellipsis-v">Bad Santa <a class="fa fa-times-circle"></a></span></li>
//     </ol>
//     <div class="wy-autocomplete-group">
//       <label class="fa fa-search"></label>
//       <input placeholder="Add item" type="text">
//     </div>
//   </div>
// </div>
//
// Styleguide 9.2

.wy-tag-input-group.wy-tag-input-group-many
  border: none
  box-shadow: none
  padding: 0
  display: block
  background: transparent
  .wy-autocomplete-group
    display: inline-block
    border: solid 1px $table-border-color
    width: 50%
    margin-bottom: $base-line-height / 4
    padding: 0 $base-line-height / 4
    label
      margin-left: 0
    input
      margin-bottom: 0
    .wy-spinner
      float: right
      margin-top: $base-line-height / 4
      margin-bottom: $base-line-height / 4

.wy-tag-input-group.wy-tag-input-group-many ol
  margin-bottom: 0

.wy-tag-input-group.wy-tag-input-group-many ol li
  cursor: move
  margin-left: 0
  span
    padding: $base-line-height / 4 $base-line-height / 2
    margin-bottom: $base-line-height / 4
    background: rgba(0,0,0,.1)
    position: relative
    +truncate(50%)
    +transition(background .5s ease-in-out)
  &.active span
    background: rgba(0,0,0,.2)

  span:hover
    .#{$icon-prefix}-#{$icon-remove}
      opacity: 1
  span:before
    color: $gray-light
    margin-right: $base-line-height / 4

  .#{$icon-prefix}-#{$icon-remove}
    position: absolute
    right: $base-line-height / 4
    top: $base-line-height / 4
    color: $red
    opacity: 0

.wy-tag-input-group.wy-tag-input-group-many li
  cursor: auto

+media($mobile)
  .wy-tag-input-group.wy-tag-input-group-many ol li span
    width: 100%

