$autocomplete-bg: $body-bg !default;
$autocomplete-side-bg: $body-bg-alt !default;
$autocomplete-box-shadow: $box-shadow !default;

.autocomplete {
   @include custom-scrollbar;

   background: $autocomplete-bg;
   border-top: 1px solid $border-color;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   top: 100%;
   left: 0;
   transition: all $transition-speed;
   height: 0;
   width: 100%;
   z-index: -1;

   &.opened {
      box-shadow: $autocomplete-box-shadow;
      height: auto;
      max-height: calc(100vh - 140px);
      opacity: 1;
      overflow-y: auto;
      z-index: 200;
   }

   > .container {
      max-width: 100%;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      background: $autocomplete-bg;
   }

   .title-default {
      font-weight: $font-weight-bold;
      margin-bottom: 15px;
   }

   ul {
      @include list-unstyled;

      margin-bottom: $spacer;
   }

   li {
      line-height: $line-height-md;

      a {
         @include underline-hover;

         display: block;
         color: $text-dark;
         padding: 2px 0;
      }
   }

   .ac-showall {
      width: 100%;
      margin-top: 20px;
   }

   .ac-showall-resp {
      display: none;
   }

   .btn {
      display: block;
      margin: auto;
      max-width: 415px;
   }

   .autocomplete-noresult {
      padding: 20px;
   }
}

.autocomplete-wrapper {
   display: flex;
   flex-direction: column;
   max-width: 75%;
   width: 100%;
   padding: 30px 20px 20px;
}

.autocomplete-products {
   width: 100%;

   ul {
      margin-bottom: 0;
   }

   .autocomplete-product-item {
      border-bottom: 1px solid $border-color;

      > a {
         @include underline-never;

         display: flex;
         align-items: center;
         padding: 10px;
      }

      .img {
         width: 70px;
         max-width: 70px;
         margin-right: 25px;
      }

      .content {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: space-between;
      }

      .title-wrapper {
         * {
            display: block;
            margin-bottom: 2px;
         }

         small {
            color: $text-muted;
            margin-bottom: 0;
         }
      }

      .price-wrapper {
         text-align: right;
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 130px;

         .flag {
            margin: 0;
         }

         .price {
            flex: 1;
         }

         .price-common {
            display: block;
            font-weight: $font-weight-bold;
            color: $text-muted;
            text-decoration: line-through;
         }

         strong {
            display: block;
            font-size: $font-size-larger;
         }
      }

      @include haf {
         .title {
            text-decoration: underline;
         }
      }
   }
}

.autocomplete-categories {
   ul {
      display: flex;
      flex-wrap: wrap;
   }

   li {
      width: 50%;
      margin-bottom: 10px;
   }
}

.autocomplete-side {
   background: $autocomplete-side-bg;
   border-left: 1px solid $border-color;
   max-width: 25%;
   width: 100%;
   padding: 30px 20px 20px;

   .autocomplete-articles li {
      margin-bottom: $spacer;

      img {
         margin-bottom: 5px;
      }
   }

   .autocomplete-categories li {
      margin-right: 0;
      width: 100%;
   }
}

@media screen and (min-width: $lg) and (max-width: $xl - 1),
screen and (max-width: 679px) {
   .autocomplete {
      .ac-showall {
         display: none;
      }

      .ac-showall-resp {
         display: block;
         margin: $grid-gutter-width;

         .btn {
            max-width: none;
         }
      }
   }

   .autocomplete-categories {
      li {
         width: 50%;
      }
   }

   .autocomplete-wrapper {
      max-width: 100%;
      padding: 20px $grid-gutter-width $grid-gutter-width;
   }

   .autocomplete-products {
      .autocomplete-product-item {
         .img {
            width: 50px;
            max-width: 50px;
            margin-right: 20px;
         }
      }
   }

   .autocomplete-side {
      max-width: 100%;
      border-left: 0;
      padding-bottom: 0;

      .autocomplete-articles li {
         img {
            display: none;
         }
      }

      .autocomplete-articles li,
      .autocomplete-categories li {
         margin-bottom: 10px;
      }
   }
}
