xrpl-dev-portal/styles/_forms.scss

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

  .ds-input {
    background-color: $gray-800;
    border-radius: 0 $border-radius-sm $border-radius-sm 0;
    padding: 0.75rem 1rem 0.75rem 0.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 {
  .DocSearch-Modal {
    top: 85px;
    background-color: #232325;
    box-shadow: none;
  }
}
// Algolia Search results --------------------------------------------------
html {
  // The extra specificity makes this override the default Algolia styles.
  .DocSearch-Modal {
    box-shadow: none;
  }
  .DocSearch-Button {
    height: 32px;
    border-radius: 4px;
  }
  .DocSearch-Button:hover {
    border-radius: 4px;
  }
  .DocSearch-Modal {
    max-width: 55%;

    @include media-breakpoint-up(xl) {
      margin-right: 112px;
    }
  }

  @include media-breakpoint-down(md) {
    .algolia-autocomplete .ds-dropdown-menu {
      min-width: unset;
    }
    .DocSearch-Modal {
      top: 112px;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
  }
  .DocSearch-Container {
    z-index: 99999 !important;
    background-color: transparent !important;
  }
  #centersearchboxcontainer {
    justify-content: center;
  }
  #topsearchboxcontainer {
    justify-content: right;
  }
  .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
    background-color: $dropdown-bg;
    border: 0;
    border-radius: $border-radius-lg;
  }
  .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
    border: 0;
    font-weight: bold;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--text {
    font-size: 0.8rem;
  }
  .algolia-autocomplete .ds-dropdown-menu::before {
    border: 0;
  }

}

.dark {
  // Fixes for Algolia search interface for dark mode specifically
  .DocSearch-Modal {
    background-color: #232325;
  }

  .DocSearch-Cancel {
    color: $blue-purple-400;
  }
  .DocSearch-Form {
    box-shadow: inset 0 0 0 2px $blue-purple-400;
    background-color: #232325;
  }
  .DocSearch-Hit-source {
    color: $blue-purple-400;
  }
  .DocSearch-Hits mark {
    color: $blue-purple-400;
  }
  .DocSearch-Hit-source,
  .DocSearch-Hit-Container,
  .DocSearch-Footer {
    background-color: #232325;
  }
  .DocSearch-Hit a {
    background-color: #232325;
    box-shadow: none;
  }
  .DocSearch-Hit-source {
    color: $black-40;
  }
  .DocSearch-Input {
    color: $white;
  }
  .DocSearch-Hit-title,
  .DocSearch-Hit-path,
  .DocSearch-Label,
  .DocSearch-Help {
    color: $black-10 !important;
  }
  .DocSearch-Hit[aria-selected="true"] a {
    background: $gray-700;
    .DocSearch-Hit-Container {
      background-color: $gray-700;
    }
    mark {
      color: $blue-purple-400 !important;
    }
  }
  .DocSearch-Prefill {
    color: $blue-purple-400;
  }
  .DocSearch-Button {
    background: $gray-800;
  }
  .DocSearch-Button:hover {
    background: $gray-800;
    box-shadow: inset 0 0 0 2px $blue-purple-400;
    .DocSearch-Button-Placeholder {
      color: $white;
    }
  }
  .DocSearch-Search-Icon {
    color: $white !important;
  }
  .DocSearch-Logo svg {
    .cls-1,
    .cls-2 {
      fill: white;
    }
  }
  .DocSearch-Commands-Key {
    color: $gray-800;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
    color: $white;
    border-bottom: 2px solid $blue-purple-400;
  }

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

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

  .algolia-autocomplete .algolia-docsearch-suggestion--text {
    color: $gray-200;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
    color: $white;
    background-color: $gray-700;
  }
  .algolia-autocomplete .ds-dropdown-menu::before {
    background-color: $dropdown-bg;
  }
  .algolia-autocomplete .algolia-docsearch-suggestion {
    background-color: $dropdown-bg;
  }
  .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;
  }

}