.algolia-autocomplete {
  width: 100%;

  /* Main dropdown wrapper */
  .ds-dropdown-menu {
    width: 74vw;
    max-width: 800px;
    background: $sidebar-search-bg;

    [class^=ds-dataset-] {
      background-color: $sidebar-search-bg;
      border: none;
      box-shadow: 2px 2px 10px $sidebar-search-shadow;
      transition: background-color .2s;
    }
    &:before {
      display: none;
    }

    .ds-suggestions {
      padding: 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;
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// 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;
  }
}