.site-search-container {
  position: relative;
  padding-left: units(2);
  display: none;

  @include media($nav-width) {
    display: block;
  }

  va-icon {
    position: absolute;
    left: 22px;
    color: rgba(255, 255, 255, 0.75);
    top: 12px;
  }
}

.site-search-container__input[type="search"] {
  box-sizing: border-box;
  padding-left: 32px;
  color: white;
  background: rgba(22, 23, 31, 0.5);

  &::-webkit-search-cancel-button {
    display: block;
  }
}

.site-search-container__input::placeholder {
  color: white !important;
}

.site-search-results:empty {
  display: none;
  border: none;
}

.site-search-results {
  color: var(--vads-color-base);
  border: 1px solid $color-gray-lighter;
  background: transparent;
  margin: 0;
  list-style-type: none;
  position: absolute;
  right: 0;
  padding: 0;
  top: 57px;
  width: 140%;
  z-index: 10000;
  max-height: 358px;
  overflow: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  li {
    margin: 0;
    background: white;

    a,
    a:visited {
      display: block;
      text-decoration: none;
      padding: units(2);
      margin-top: -1px;
      color: var(--vads-color-base);
      transition: none;
      width: 100%;
    }

    a:hover {
      color: var(--vads-color-base);
    }
  }
}

.site-seach-container--mobile {
  display: none;
  border-top: 1px solid $vads-color-primary-dark;
  background: $vads-color-primary-darker;
  width: 100%;
  margin: -3px 0 -3px;
  padding: units(2);

  &.is-visible {
    display: block;

    @include media($nav-width) {
      display: none;
    }
  }

  .search-icon {
    top: 28px;
  }
}

.site-search-results--mobile {
  left: 16px;
  width: calc(100% - 32px);
  top: 60px;
}

.site-search-results__url {
  display: none;
}

.site-search-results--results-page {
  position: static;
  max-height: none;
  width: 100%;
  font-size: 1.25rem;
  border: none;
  overflow: visible;

  li a {
    margin-top: 0;
    margin-bottom: units(2);
  }

  strong {
    display: inline-block !important;
    padding-right: units(1);
  }

  .site-search-results__url {
    display: block;
    font-size: 0.9375rem;
    color: var(--vads-color-primary-alt-darkest);
  }
}

.site-toggle-search {
  color: white;
  background-color: transparent;
  width: 44px;
  display: flex;
  height: 100%;
  align-items: center;
  align-content: center;
  margin: 0 8px 0 auto;
  align-self: center;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  font-size: 20px;

  &:hover,
  &:focus,
  &:active {
    background-color: transparent;
  }

  @include media($nav-width) {
    display: none;
  }
}

// This adds the border between search results in the global results container
#results-container.site-search-results li a,
#results-container.site-search-results li a:visited {
  border: 1px solid $color-gray-lighter;
}
