.search {
  .input-group-text {
    border-width: 0;
    color: $white;
    background-color: $gray-800;
    border-radius: $border-radius-sm 0 0 $border-radius-sm;
    padding: .5rem .5rem .5rem 1rem;
    line-height: 1.5;
  }

  .ds-input {
    background-color: $gray-800;
    border-radius: 0 $border-radius-sm $border-radius-sm 0;
    padding: .75rem 1rem .75rem .5rem;
    width: 100%;
    border: 1px solid $gray-800;

    &:focus {
      box-shadow: none;
      border-color: $purple;
    }
  }

  .algolia-autocomplete {
    flex-grow: 1;
  }
}

#algolia-autocomplete-listbox-0 {
    z-index: 1100 !important;
}

.xrp-ledger-dev-portal {
  // The extra specificity makes this override the default Algolia styles.
  // Algolia Search results --------------------------------------------------
  .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
    background-color: $dropdown-bg;
    border: 0;
    border-radius: $border-radius-lg;
  }
  .algolia-autocomplete .ds-dropdown-menu::before {
    background-color: $dropdown-bg;
    border: 0;
  }
  .algolia-autocomplete .algolia-docsearch-suggestion {
    background-color: $dropdown-bg;
  }
  .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
    color: $white;
    border: 0;
    border-bottom: 2px solid $blue-purple-500;
    font-weight: bold;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
    color: $white;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--title {
    color: $white;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--text {
    font-size: 0.8rem;
    color: $gray-200;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
    color: $white;
    background-color: $gray-700;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
    box-shadow: none;
    background-color: $gray-700;
  }

  @include media-breakpoint-down(md) {
    .algolia-autocomplete .ds-dropdown-menu {
      min-width: unset;
    }
  }
}