/* -------- Search bar -------- */
.search-bar {
  @extend %clearfix;
  left: 0;
  bottom: 0;
  position: relative;

  @include media-query-medium {
    @include rem('left', 170px);
    @include rem('top', 37px);
    position: absolute;

  }
}

.search-bar--search-wrap {
  overflow: hidden;

  @include media-query-medium {
    float: left;
  }
}

.search-bar--search {
  @include rem('text-indent', 15px);
  @include rem('height', 35px);
  @include rem('line-height', 35px);
  @include rem('font-size', 15px);
  width: 100%;
  float: left;
  font-family: $font__mns-london;
  font-style: normal;
  border: solid 1px $color__brand--light-grey;
  outline: none;

  @include media-query-small {
    @include rem('text-indent', 30px);
    @include rem('font-size', 40px);
    @include rem('line-height', 100px);
    border: none 0 transparent;
    color: $color__brand--grey-80;
    float: none;
    font-style: italic;
    height: 100px;
  }

  @include media-query-medium {
    @include rem('height', 40px);
    @include rem('padding', 5px 15px);
    @include rem('line-height', 31px);
    @include rem('font-size', 15px);
    @include rem('width', 326px);
    text-indent: 0;
    float: left;
    font-family: $font__mns-london;
    font-style: normal;
    border: solid 1px $color__brand--light-grey;
    outline: none;

    &:focus {
      border-color: $color__brand--medium-grey;
      color: $color__brand--dark-grey;
    }
  }

  &:focus {
    border-color: $color__brand--medium-grey;
    color: $color__brand--dark-grey;
    outline: 0;
  }

}

.search-bar--search-lg {
  @include rem('height', 40px);
  @include rem('padding', 5px 15px);
  @include rem('line-height', 31px);
  @include rem('font-size', 15px);
  @include rem('width', 326px);
  float: left;
  font-family: $font__mns-london;
  font-style: normal;
  border: solid 1px $color__brand--light-grey;
  outline: none;

  &:focus {
    border-color: $color__brand--medium-grey;
    color: $color__brand--dark-grey;
  }
}

.search-bar--legend {
  @extend %visuallyhidden;
}

.search-bar--fieldset {
  @include rem('padding', 10px);
  margin: 0;
  border: 0 solid transparent;

  @include media-query-small {
    padding: 0;
  }
}

.search-bar--submit {
  @include rem('padding-left', 26px);
  @include rem('width', 41px);
  @include rem('height', 35px);
  background-color: $color__brand--light-grey;
  border: none 0 transparent;
  cursor: pointer;
  float: right;
  font-style: normal;
  margin: 0;
  outline: 0;

  @include media-query-small {
    @include rem('margin', 36px 20px 0 20px);
    @include rem('font-size', 28px);
    @include rem('width', 60px);
    background-color: transparent;
    color: $color__brand--light-grey;
    font-style: italic;
    text-decoration: underline;
    padding: 0;
    text-indent: 0;
  }

  @include media-query-medium {
    @include rem('height', 40px);
    @include rem('padding-left', 41px);
    @include rem('width', 46px);
    background-color: $color__brand--light-grey;
    font-style: normal;
    margin: 0;
    outline: 0;
  }

  &::before {
    @include rem('left', 15px);
    @include rem('font-size', 15px);
    color: $color__brand--white;
    font-weight: bold;

    @include media-query-small {
      display: none;
    }

    @include media-query-medium {
      display: block;
    }
  }
}

.search-bar--submit__active {
  background-color: $color__brand--green;

  @include media-query-small {
    background-color: inherit;
  }

  @include media-query-medium {
    background-color: $color__brand--green;
  }

  &::before {
    color: $color__brand--black;
  }
}

.search-bar--submit-text {
  @extend %visuallyhidden;
}

.search-bar--suggestion-dropdown {
  padding: 0;
  background-color: $color__brand--white;
  border: solid 1px $color__brand--light-grey;
  position: relative;
  width: 100vw;

  @include media-query-medium {
    @include rem('padding', 15px 0);
    @include rem('margin', 40px 0 0);
    @include rem('width', 326px);
    border-top: none 0 transparent;
    z-index: $z-product-search;
    position: static;
  }
}

.search-bar__suggestion-list {
  font-size: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;

  > li {
    @include rem('text-indent', 15px);
    background-color: $color__brand--background-grey;
    border-bottom: 1px solid $color__brand--light-grey;
    box-sizing: border-box;
    display: inline-block;
    line-height: 3;
    width: 100%;

    @include media-query-medium {
      background-color: $color__brand--white;
      border-bottom: 0 solid transparent;
      line-height: 1.5;

      &:hover {
        background-color: $color__brand--background-grey;
      }
    }

    &:hover {
      cursor: pointer;
    }

    > a {
      text-decoration: none;
    }

    > a:hover {
      text-decoration: underline;
    }
  }
}


.res-nav-header__dropdown--search {
  width: 100vw;
  position: relative;
  display: block;
  padding: 0;
  background-color: $color__brand--white;
  border-bottom: 1px solid $color__brand--black;
  border-top: 1px solid $color__brand--black;
  border-right: none 0 transparent;
  border-left: none 0 transparent;

  @include media-query-medium {
    width: auto;
    border: none;
    background-color: transparent;
  }
}

.res-nav-header__item--search {
  @include rem("width", 50px);

  @include media-query-max-xsmall {
    .dropdown__panel-wrapper {
      @include rem("left", -50px);

      width: 100vw;
    }
  }

  @include media-query-xsmall {
    @include rem("width", 55px);

    .dropdown__panel-wrapper {
      @include rem("left", -55px);
    }
  }

  @include media-query-small {
    @include rem("width", 110px);

    .dropdown__panel-wrapper {
      @include rem("left", -170px);
    }
  }

  @include media-query-medium {
    .dropdown__panel-wrapper {
      @include rem("left", -170px);
    }
  }

  @include media-query-large {
    .dropdown__panel-wrapper {
      border-bottom: 0 none;
      left: 0;
    }
  }
}

.nav-header__link--search {
  @include media-query-small {
    &::before {
      width: 42%;
    }
  }
}