// Autocomplete
//------------------------------------------------------

// debug

/*
.autocomplete {
   max-height: 500px!important;;
   opacity: 1!important;
}
*/

.autocomplete-control.opened {
   background: $white;
   border-color: $white;
   color: $font-color-light;
}

.autocomplete {
   border-top: 0;
   background: $white;
   font-size: 11px;
   left: 0;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   top: 100%;
   transition: all .25s ease-out;
   z-index: 1000;
   color: $font-color;
   width: 100%;
   box-shadow: 0 4px 6px 0 rgba(100, 104, 118, .25);

   &.opened {
      border-top: 0;
      max-height: 700px;
      opacity: 1;
      transition: all .25s ease-in;
   }

   h4 {
      font-size: 12px;
      font-family: $font-proxima;
   }

   ul {
      @include list-unstyled;
   }

   li {
      line-height: 1.4em;
      padding: 4px 0;
      font-size: 12px;
      font-family: $font-proxima;
      text-transform: none;
   }

   .ac-products {
      padding: 0 15px;
      float: left;

      a {
         @include underline-hover;

         color: $font-color;
         display: block;
         font-size: 11px;
         line-height: 18px;
         overflow: auto;
      }

      li {
         border-top: 1px solid $border-color;
         padding: 9px 0;

         &:focus {
            background: #f5f7fa;
         }
      }

      img {
         border: 1px solid $border-color;
         display: block;
         float: left;
         max-width: 47px;
         margin-right: 12px;
         max-height: 41px;
         overflow: hidden;
      }

      span {
         display: block;
         padding-left: 58px;
      }
   }

   .ac-categories {
      float: left;
      padding: 20px;

      a {
         @include underline-hover;

         color: $font-color;
         font-size: 12px;
      }
   }

   .ac-showall {
      clear: both;
      padding: 0 20px 30px;
      text-align: center;
   }

   .btn {
      color: $white;

      @media screen and (max-width: 400px) {
         width: 100%;
         padding-left: 0;
         padding-right: 0;
      }
   }

   @media (min-width: 544px) {
      width: 100%;

      .ac-products {
         width: 60%;
      }

      .ac-categories {
         width: 40%;
      }
   }

   @media screen and (min-width: 992px) {
      width: 450px;
   }

   @media screen and (max-width: 499px) {
      .ac-categories {
         float: left;
         padding: 10px 20px;
         width: 50%;
      }

      .ac-products a {
         max-height: 36px;
         overflow: hidden;
      }
   }
}
