.search-bar {
  position: relative;
  height: 35px;

  .search-container {
    position: relative;

    .input.site-search-field {
      @include font-size(16px);
      padding: 4px 40px 5px 6px;
      margin-bottom: 0;
      font-style: italic;
      box-sizing: border-box;
    }

    input.search-icon-container {
      position: absolute;
      right: 0;
      top: 1px;
      bottom: 0;
      width: 35px;
      border: 0;
      background: url('/images/svg/icons/header/search.svg') center center no-repeat;
      box-sizing: border-box;
      @include font-size($base-font-size);
    }
  }

  &-dropdown {
    opacity: 0;
    z-index: 10;
    left: 0;
    width: 100vw;
    max-height: 0px;
    overflow: hidden;
    margin-top: -30px;
    position: fixed;
    background: $white;
    pointer-events: none;
    border-radius: 0 0 6px 6px;
    transition: all 200ms ease-in-out;

    @media (min-width: $screen-sm-min) {
      width: 100%;
      position: absolute;
    }

    &-heading {
      color: darken($gray, 10%);
      padding: 10px;
      font-size: 11px;
      background: $gray-light;
    }

    a {
      display: block;
      color: darken($gray, 10%);
      padding: 10px 0px 10px 21px;
      font-size: 11px;

      &:after {
        content: ' ';
        border-bottom: 1px solid $gray-light;
        width: 100%;
        display: block;
        margin-right: -10px;
        margin-top: 10px;
        margin-bottom: -10px;
      }

      &:before {
        display: block;
        float: left;
        margin: 5px 0 0 -14px;
        content: ' ';
        border-radius: 100%;
        background: $red;
        height: 7px;
        width: 7px;
        opacity: 0;
        transition: all 200ms ease-in-out;
      }

      &:hover, &:focus {
        font-weight: bold;
        color: darken($gray, 10%) !important;
        background: lighten($gray-medium, 40%);
      }

      &:focus:before {
        opacity: 1;
      }

      &:hover {
        text-decoration: underline;
      }

    }

    &-widget li:last-of-type a:after {
      display: none;
    }

  }

  &.is-active {
    .search-bar-dropdown {
      opacity: 1;
      margin-top: 6px;
      overflow: auto;
      max-height: 65vh;
      pointer-events: all;

      @media (min-width: $screen-sm-min) {
        margin-top: 0px;
      }
    }
  }

}


.no-svg .search-container .search-icon-container {
  background: url('/images/us/bsd/header/search_icon.png') center center no-repeat;
}

html {
  width: 100%;
  height: 100%;
}

body{
  position: relative;
  width: 100vw;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

/* FullScreen Active State Overlay */
body.has-search-active {
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling : touch;
  height: 100% !important;
}