.nav-search {
  $block: unquote("#{&}");
  display: inline-block;
  order: 2;
  @include for-size(tablet-portrait-up) {
    display: inline;
    order: 3;
  }
  &__wrapper {
    background: #fff;
    color:#000;
    display: none;
    height: auto;
    margin: 0 auto;
    padding: $spacer-half 5%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.5);
    box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.5);
    @include for-size(tablet-landscape-up) {
      padding: $spacer-mid 5% $spacer-mid 19.5%;
    }
  }
  &__label {
    cursor: pointer;
    display: block;
    font-size: $font-x-small;
    padding: $spacer-half $spacer-small;
    position: relative;
    @media screen and (min-width: 18.750em) {
      font-size: $font-small;
    }
    @include for-size(tablet-portrait-up) {
      display: inline-block;
      margin: 0 -1em 0 0;
      padding: $spacer-half;
    }
    @include for-size(desktop-up) {
      padding: $spacer-half 1em;
    }
    &:before {
      background: url('/static/img/icons/yegna/icon-search.svg') no-repeat center center/90%;
      content: "";
      display: block;
      height: 20px;
      vertical-align: middle;
      margin: 0 auto;
      width: 20px;
      text-align: center;
      @media screen and (min-width: 18.750em) {
        height: 27px;
        width: 27px;
      }
      @include for-size(tablet-portrait-up) {
        background-size: auto;
        display: inline-block;
        margin: 0 $spacer-small 0 0;
        height: 33px;
        text-align: inherit;
        width: 37px;
      }
    }
    &:after {
      content: "";
      display: block;
      border-radius: 10%;
      background: transparent;
      width: 100%;
      height: 3px;
      position: absolute;
      margin: -3px auto;
      right: 0;
      @include for-size(tablet-portrait-up) {
        width: 55%;
      }
      @include for-size(desktop-up) {
        margin: -5px auto;
        right: 13px;
        width: 45%;
      }
    }
    &:active, &:hover, &:focus {
      opacity: 1;
      transition: opacity 100ms ease-in-out;
      &:after {
        background: #000;
      }
    }
  }
  .open {
    background: #fff;
  }
}
