.header-search-form {
   position: relative;

   .autocomplete-control {
      border: 0;
      padding: 5px 40px 5px 0;

      &:focus::placeholder {
         color: transparent;
      }
   }

   button {
      @include btn-reset;

      cursor: pointer;
      font-size: 18px;
      padding: 5px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;

      @include haf {
         color: $brand-ctr;
      }
   }

   .autocomplete {
      padding: 20px 25px;
   }

   .search-close {
      display: none;
   }

   @media screen and (min-width: $xxl) {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-grow: 1;
      margin-left: 30px;

      .autocomplete-control {
         border-bottom: 1px solid $border-color;
         max-width: 270px;
         width: 100%;
         transition: all $transition-speed ease;

         &.opened,
         &:focus {
            border-bottom-color: $black;
            max-width: 600px;
         }

         &:hover {
            border-bottom-color: $black;
         }
      }

      .autocomplete {
         margin-top: 1rem;
         min-width: 430px;
      }
   }

   @media screen and (max-width: $xxl - 1) {
      background: $white;
      border-top: 1px solid $border-color;
      margin: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 1px);
      transform: translateY(-80%);
      transition: all .3s;
      z-index: -1;

      &.active {
         opacity: 1;
         pointer-events: auto;
         transform: translateY(-100%);
         z-index: 101; // nad home-slider
      }

      .autocomplete-control.autocomplete-control {
         border-bottom: 1px solid $border-color;
         padding-left: 16px;
         position: relative;
         z-index: 1001;
      }

      button {
         padding: 5px 16px;
         right: 5px;
         z-index: 1002;
      }
   }

   @media screen and (max-width: $lg - 1) {
      transform: translateY(-15%);
      top: 100%;

      &.active {
         transform: translateY(0);
      }
   }

   @media screen and (max-width: $sm - 1) {
      .autocomplete-control.autocomplete-control {
         padding: 5px 40px 5px 50px;
      }

      button {
         right: unset;
         left: 0;
      }

      .search-close {
         display: flex;
         align-items: center;
         position: absolute;
         right: 10px;
         font-size: 18px;
         color: $text-dark;
         top: 0;
         bottom: 0;
         z-index: 1002;

         @include haf {
            color: $state-error;
         }
      }
   }

   @media screen and (max-width: $xs - 1) {
      .autocomplete {
         padding: 20px 15px;
      }
   }
}
