/**
 * 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 {
  display: none;

  &[open] {
    display: flex;

    // Center in middle of screen just underneath header
    position: fixed;
    z-index: $zindex-modal;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: 1rem;
    margin-top: 0.5rem;
    width: 90%;
    max-width: 800px;
    background-color: transparent;
    padding: $focus-ring-width;
    border: none;

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

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

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

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