$header-search-bg: $body-bg !default;
$header-search-border-bottom: null !default;
$header-search-box-shadow: 0 16px 17px rgba(0, 0, 0, .08) !default;
$header-search-close-color: $brand-primary !default;
$header-search-close-color-hover: $state-error !default;
$header-search-height: 55px;

@import "@css[shared]/components/header/_header-search";

@if ($header-search-v == 2) {
   .header-search-inner {
      form {
         border-bottom: 0;
         max-width: 988px;
      }

      .autocomplete-control {
         padding-left: 60px;
         padding-right: 18px;
         border: 1px solid $border-color;
         border-radius: $border-radius-base;
         color: $black;
      }

      button[type=submit] {
         @include btn-reset;

         display: flex;
         align-items: center;
         justify-content: center;
         width: 38px;
         height: 38px;
         font-size: 18px;
         z-index: 1;
         margin: 0 -46px 0 8px;
         cursor: pointer;
      }

      .search-clear {
         margin-left: -44px;
         margin-right: 14px;
         height: 30px;
         width: 30px;
         z-index: 1;
         border-radius: 50%;
         background-color: $body-bg-alt;
         color: $text-muted;
         font-size: 12px;

         @include haf {
            color: $red;
         }
      }

      .search-toggle {
         padding: 0;
         margin-top: 2px;

         .fc {
            font-size: 12px;
            position: relative;
            margin-left: 10px;
            top: -2px;
         }
      }

      &.active {
         top: -57px;
      }
   }

   @media screen and (max-width: $lg - 1) {
      .header-search-inner {
         &.active {
            top: 0;
         }
      }
   }

   @media screen and (max-width: $md - 1) {
      .header-search-inner {
         height: 130px;
         padding-bottom: 10px;

         form {
            @include delete-before;

            border: 0;
            padding: 0;

            .search-toggle {
               display: none;
            }
         }

         .autocomplete-control {
            border: 1px solid $border-color;
            padding-left: 50px;
            padding-right: 18px;
         }
      }

      .search-responsive-header {
         background: $header-search-bg;
         display: flex;
         justify-content: space-between;
         height: $header-search-height;
         padding: 20px;

         button {
            @include title-default;
         }

         .fc {
            margin-right: 10px;
            font-size: 12px;
         }
      }
   }

   @media screen and (max-width: $xs - 1) {
      .header-search-inner {
         button[type=submit] {
            @include delete-before;
         }
      }
   }
}

