$quick-search-width: 800px;

.Nxd-search {

@extend .clearfix;
background: white;
position: absolute;
box-shadow: $shadow;
width: $quick-search-width;
right: 0;
margin-top: 28px;
border-radius: 8px;
z-index: 5;
overflow: hidden;

@include media-query($max-width: $quick-search-width + ($spacing * 2)) {
  width: calc(100vw - #{$spacing * 2});
}

@media #{$S-only} {
  position: relative;
}

}

.Nxd-search–no-results {

padding-left: $spacing;

}

.Nxd-search__wrapper {

display: flex;
flex-wrap: wrap;
margin-right: -1px;

}

.Nxd-search__result {

overflow: hidden;
border-bottom: 1px solid $grey-light;

.Nxd-search__result__link {
  display: block;
  padding: $spacing/2 $spacing $spacing/2;

  &:hover {
    background: $grey-lighter;
  }

  &:focus {
    background-color: rgba(0,0,0,0.1);
  }

  h6 {
    font-weight: 900;
  }
}

.Nxd-search__result__highlight {
  color: $grey-dark;
  font-size: 0.85em;

  em {
    color: $red;
    font-weight: 700;
  }
}

.Nxd-search__result__desc {
  overflow: hidden;
  color: $black;
  font-size: 0.85em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.meta {
  background: lighten($stone-light, 25%);
  padding: 2px 5px;
  display: inline-block;
  border-radius: $radius;
}

}

.Nxd-search__results {

flex: 1;
width: 50%;
padding: $spacing 0;
border-right: 1px solid $grey-light;
min-width: 280px;

.Nx-search__title {
  padding-left: $spacing;
}

}

.Nxd-search__clear {

height: 38px;
position: absolute;
right: 4px;
top: 7px;
padding: 5px;
font-size: 17px;
fill: $grey;
cursor: pointer;
width: 25px;

&:hover {
  fill: $red;
}

}

.Nxd-search__badge {

margin-left: 0;

}