docs-v2/assets/styles/layouts/_algolia-search-overrides.scss

.algolia-autocomplete {
  width: 100%;

  /* Search input field */
  #algolia-search-input {
    background: $sidebar-search-bg !important;
  }

  /* Main dropdown wrapper */
  .ds-dropdown-menu {
    width: 74vw;
    max-width: 800px;
    background: $sidebar-search-bg;
    background-color: $sidebar-search-bg;
    border: none;
    box-shadow: 2px 2px 10px $sidebar-search-shadow;
    transition: background-color 0.2s;


    [class^=ds-dataset-] {
      border: none;
      background: $sidebar-search-bg;
      background-color: $sidebar-search-bg;
    }
    &:before {
      display: none;
    }

    .ds-suggestions {
      padding: .5rem 2rem 2rem;
    }
  }

  /* Main category (eg. Getting Started) */
  .algolia-docsearch-suggestion {
    background: $sidebar-search-bg;

    &--category-header {
      color: $article-heading;
      border-color: $article-hr;
      text-decoration: none;
      &-lvl0{
        font-size: 1.5rem;
        font-weight: bold !important;
        padding-bottom: 1rem;
      }
    }

    /* Category (eg. Downloads) */
    &--subcategory-column {
      color: rgba($article-text, .5) !important;
      &:before { background: $article-hr; }
    }

    /* Title (eg. Bootstrap CDN) */
    &--title {
      font-weight: bold;
      color: $article-heading;
    }

    /* Description description (eg. Bootstrap currently works...) */
    &--text {
      font-size: 0.8rem;
      color: $article-text;
    }

    /* Highlighted text */
    &--highlight {
      color: $article-link;
    }

    &--content {
      &:before { background: $article-hr; }
    }
  }
}

//////////////////////////////// HARD OVERRIDES ////////////////////////////////
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header,
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
  text-decoration: none;
}

.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header {
  padding-bottom: .75rem;
  margin-bottom: .5rem;
}

.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
  left: 24vw !important;
  top: -.45rem !important;
}

.ds-suggestion:not(:first-child) {
  .algolia-docsearch-suggestion--category-header{
      margin-top: 1.5rem;
  }
}

.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion {
  &--wrapper { padding: 0; }
  &--subcategory-column { display: none; }
  &--content {
    margin: 2px 0;
    padding: .75rem;
    width: 100%;
    float: none;
    &:before {
      display: none;
    }
  }
}

.algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results {
  text-align: center;
}

////////////////////////// Search result version tags //////////////////////////
.algolia-autocomplete .algolia-docsearch-suggestion .search-product-version {
  font-size: .8em;
  font-weight: $medium;
  opacity: .5;
  margin-left: .35rem;
}

.algolia-autocomplete .algolia-docsearch-suggestion--title .search-product-version {
  display: none;
}

///////// CUSTOM ELEMENTS ADDED IN layouts/partials/footer/search.html /////////

.search-all-content {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  text-align: right;

  a {
    color: $article-text;
    opacity: .6;
    text-decoration: none;
    transition: opacity .2s;
    &:hover{
      opacity: 1;
    }
  }
}

.search-no-results {
  padding: 2rem;
  text-align: center;
  font-size: 1.1rem;
  color: rgba($article-text, .75);
  font-style: italic;

  a {
    position: relative;
    display: inline-block;
    margin: .5rem .25rem .5rem 0;
    padding: 0.85rem 1.5rem;
    color: $article-btn-text !important;
    border-radius: $radius;
    font-size: 1.1rem;
    font-weight: $medium;
    font-style: normal;
    text-decoration: none;
    z-index: 1;
    @include gradient($article-btn-gradient);

    &:after {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: $radius;
      @include gradient($article-btn-gradient-hover);
      opacity: 0;
      transition: opacity .2s;
      z-index: -1;
    }

    &:hover {
      cursor: pointer;

      &:after {
        opacity: 1;
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@media (min-width: 801px) and (max-width: 1200px) {
  .algolia-autocomplete .ds-dropdown-menu {
    max-width: 70vw;
  }
  .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
    left: 28.5vw !important;
    top: -.45rem !important;
  }
}

@include media(medium) {
  .algolia-autocomplete .ds-dropdown-menu {
    max-width: 100vw;
    width: 100vw;
    min-width: 0;
  }
  .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
    left: -1rem !important;
    top: 112% !important;
  }
}

@include media(small) {
  .algolia-autocomplete .ds-dropdown-menu {
    width: 100vw;
  }
  .algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
    padding: .5rem;
  }
}