/**
 * Search field
 **/
.bd-search {
  position: relative;
  padding-left: 0.5rem;
  gap: 0.5rem;
  background-color: var(--pst-color-background);
  border-radius: $admonition-border-radius;
  border: 1px solid var(--pst-color-border);
  color: var(--pst-color-text-base);

  // Background should always be same color regardless of active or not
  &:active {
    background-color: var(--pst-color-background);
    color: var(--pst-color-text-muted);
  }

  // Hoist the focus ring from the input field to its parent
  &:focus-within {
    box-shadow: $focus-ring-box-shadow;

    input:focus {
      box-shadow: none;
    }
  }

  .icon {
    position: absolute;
    color: var(--pst-color-border);
    left: 25px;
  }

  .fa-solid.fa-magnifying-glass {
    position: absolute;
    left: calc((2.5rem - 0.7em) / 2);
    color: var(--pst-color-text-muted);
  }

  input.form-control {
    background-color: var(--pst-color-background);
    color: var(--pst-color-text-base);
    border: none;

    // Inner-text of the search bar
    &::placeholder {
      color: var(--pst-color-text-muted);
    }

    // Remove the little "x" that pops up when you start typing
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration {
      appearance: none;
    }

    &:focus,
    &:focus-visible {
      color: var(--pst-color-text-muted);
    }
  }

  // Shows off the keyboard shortcuts for the button
  .search-button__kbd-shortcut {
    display: none;
    margin-inline-end: 0.5rem;
    color: var(--pst-color-border);

    @include media-breakpoint-up(md) {
      display: flex;
    }
  }
}

/**
 * Search button - located in the navbar
 */
.search-button i {
  // Search link icon should be a bit bigger since it is separate from icon links
  font-size: 1.3rem;
}

/**
 * The search modal <dialog>
 */
#pst-search-dialog[open] {
  margin: 15vh auto 0; // an open modal dialog has a fixed position, so these margins bring it 15% down the viewport height and center it horizontally
  width: 90%;
  max-width: 800px;
  max-height: 80vh; // when we display search-as-you-type results in the modal, it needs to be able to expand in height
  background-color: transparent;
  padding: $focus-ring-width;
  border: none;

  &::backdrop {
    background-color: black;
    opacity: 0.5;
  }

  form.bd-search {
    flex-grow: 0;

    // Font and input text a bit bigger
    svg,
    input {
      font-size: var(--pst-font-size-icon);
    }
  }

  /* In pydata-sphinx-theme.js this container is appended below
   * the query input node after the user types their search query.
   * Search results are populated into this container using Sphinx's
   * built-in, JS-powered local search tools. */
  #search-results {
    overflow-y: scroll;
    background-color: var(--pst-color-background);
    padding: 1em;

    a {
      color: var(--pst-color-link);
    }

    &.empty {
      display: none;
    }
  }
}

/**
 * The search button component that looks like a field.
 * Lives at components/search-button-field.html
 */
.search-button-field {
  $search-button-border-radius: 1.5em;

  display: inline-flex;
  align-items: center;
  border: var(--pst-color-border) solid 1px;
  border-radius: $search-button-border-radius;
  color: var(--pst-color-text-muted);
  padding: 0.5em;
  background-color: var(--pst-color-surface);

  &:hover {
    box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover);
  }

  &:focus-visible {
    border-radius: $search-button-border-radius;
  }

  // The keyboard shortcut text
  .search-button__default-text {
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    margin-right: 0.5em;
    margin-left: 0.5em;
  }

  .kbd-shortcut__modifier {
    font-size: 0.75em;
  }

  // Ensures that all the text lines up in the middle
  > * {
    align-items: center;
  }

  // Only the icon should be visible on narrow screens
  > :not(svg) {
    display: none;

    @include media-breakpoint-up(lg) {
      display: flex;
    }
  }
}
