/**
 * MS Live Search
 *
 * Standalone component stylesheet.
 *
 * Bootstrap 5 CSS custom properties are reused where possible so the
 * component follows the active Bootstrap theme.
 *
 * The theme-specific light grey-blue color can be provided through:
 *
 *     --ms-light-grey-blue
 *
 * The fallback is #e9edf0.
 */


/**
 * Prevent the page behind the search dialog from scrolling.
 *
 * JavaScript adds this class when the dialog is open.
 */
body.ms-live-search-open {
  overflow: hidden;
}


/**
 * Component-level configuration.
 *
 * These custom properties keep the important dimensions in one place.
 * They can also be overridden for a particular component instance.
 */
.ms-live-search-component {
  --ms-live-search-background:
          var(--ms-light-grey-blue, #e9edf0);

  --ms-live-search-width: 350px;
  --ms-live-search-height: 66px;
}


/* ==================================================
   Search trigger
   ================================================== */

/**
 * Button displayed in the page header.
 *
 * The form-control class in the PHP supplies the base Bootstrap input
 * styles. These rules provide the required dimensions and layout.
 */
.ms-live-search__trigger {
  width: var(--ms-live-search-width);
  max-width: 100%;
  height: var(--ms-live-search-height);

  display: inline-flex;
  align-items: center;
  gap: 1.375rem;

  color: #9AA4B2;
  text-align: left;

  background-color: var(--ms-live-search-background);
  cursor: pointer;
  border: 0;
  border-radius: 50px;
  padding: 20px;
}


/**
 * Preserve the component background on hover instead of inheriting a
 * Bootstrap button background.
 */
.ms-live-search__trigger:hover {
  color: var(--bs-body-color);
  background-color: var(--ms-live-search-background);
  box-shadow: 0 0 1rem .2rem rgba(145, 150, 123, .3);
  outline: none;
  border: 0;
}

/**
 * Use Bootstrap's focus-ring variables for consistent keyboard focus.
 */
/*.ms-live-search__trigger:focus,
.ms-live-search__trigger:focus-visible {
  color: var(--bs-body-color);
  background-color: var(--ms-live-search-background);

  outline: 0;

  box-shadow: 0 0 1rem .2rem rgba(145, 150, 123, .3);
}*/

/**
 * Programmatic focus is returned to the trigger after closing.
 *
 * Do not show a ring for mouse interaction or programmatic focus.
 */
.ms-live-search__trigger:focus {
  color: var(--bs-body-color);
  background-color: var(--ms-live-search-background);
  outline: 0;
  box-shadow: none;
}

/**
 * Preserve a visible focus indicator for keyboard users.
 */
.ms-live-search__trigger:focus-visible {
  box-shadow: 0 0 1rem .2rem rgba(145, 150, 123, .3);
}

@media (max-width: 768px) {
  .ms-live-search__trigger {
    width: 36px;
    padding: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }
  .ms-live-search__trigger:hover,
  .ms-live-search__trigger:focus,
  .ms-live-search__trigger:focus-visible {
    background-color: transparent;
  }
  .ms-live-search__trigger {
    color: #38484e;
  }
  .ms-live-search__trigger:hover {
    color: #ca4d37;
    box-shadow: none;
  }
}


.ms-live-search__icon {
  flex: 0 0 auto;
}


/* ==================================================
   Full-screen overlay
   ================================================== */

/**
 * Dark backdrop covering the viewport.
 *
 * The modal is aligned near the top of the screen, similar to Bootstrap's
 * documentation search.
 */
.ms-live-search {
  position: fixed;
  inset: 0;
  z-index: 1055;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding:
          clamp(2rem, 12vh, 7rem)
          1rem
          1rem;

  background-color:
          rgba(var(--bs-dark-rgb), 0.55);
}

/**
 * The HTML hidden attribute is controlled by JavaScript.
 */
.ms-live-search[hidden] {
  display: none;
}


/* ==================================================
   Dialog container
   ================================================== */

.ms-live-search__modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 2rem);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);

  border:
          var(--bs-border-width)
          solid
          var(--bs-border-color);

  border-radius: 20px;
  box-shadow: var(--bs-box-shadow-lg);
}


/* ==================================================
   Search header and form
   ================================================== */

.ms-live-search__header {
  flex: 0 0 auto;

  padding: 1rem;

  border-bottom:
          var(--bs-border-width)
          solid
          var(--bs-border-color);
}

.ms-live-search__form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/**
 * Positioned wrapper for the input, icon and loading indicator.
 */
.ms-live-search__field {
  position: relative;

  /*width: var(--ms-live-search-width);*/
  width: unset;
   flex: 1;
  max-width: 100%;
}


/* ==================================================
   Search input
   ================================================== */

.ms-live-search__input {
  /*width: var(--ms-live-search-width);*/
  width: 100%;
  max-width: 100%;
  height: var(--ms-live-search-height);

  /* Leave room for the search icon and loading indicator. */
  padding-right: 3rem;
  padding-left: 3rem;

  background-color: var(--ms-live-search-background);
}

.ms-live-search__input:focus {
  background-color: var(--ms-live-search-background);
}

/**
 * Hide the browser-provided search clear button because it can overlap
 * with the custom loading indicator.
 */
.ms-live-search__input::-webkit-search-cancel-button {
  display: none;
}

/**
 * Search icon placed inside the left side of the input.
 */
.ms-live-search__input-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 2;

  color: var(--bs-body-color);

  pointer-events: none;

  transform: translateY(-50%);
}


/* ==================================================
   Loading indicator
   ================================================== */

.ms-live-search__loading {
  position: absolute;
  top: 50%;
  right: 1rem;

  width: 1.25rem;
  height: 1.25rem;

  border: 2px solid rgba(var(--bs-body-color-rgb), 0.2);
  border-top-color: var(--bs-primary);
  border-radius: 50%;

  transform: translateY(-50%);

  animation:
          ms-live-search-spin
          0.7s
          linear
          infinite;
}

.ms-live-search__loading[hidden] {
  display: none;
}


/**
 * Keep translateY in the animated transform so the spinner remains
 * vertically centered while rotating.
 */
@keyframes ms-live-search-spin {
  to {
    transform:
            translateY(-50%)
            rotate(360deg);
  }
}

/**
 * Custom clear-search button.
 *
 * It occupies the same position as the loading spinner. JavaScript
 * ensures that the spinner and clear button are never visible together.
 */
.ms-live-search__clear {
  position: absolute;
  top: 50%;
  right: 1rem;
  z-index: 2;

  width: 2rem;
  height: 2rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--bs-body-color);
  background: transparent;
  border: 0;
  border-radius: 50%;

  cursor: pointer;

  transform: translateY(-50%);
}

.ms-live-search__clear:hover {
  background-color: rgba(var(--bs-body-color-rgb), 0.08);
}

.ms-live-search__clear:focus-visible {
  outline: 0;

  box-shadow:
          0 0 0 0.2rem
          rgba(var(--bs-primary-rgb), 0.25);
}

.ms-live-search__clear[hidden] {
  display: none;
}



/* ==================================================
   Cancel button
   ================================================== */

.ms-live-search__cancel {
  flex: 0 0 auto;

  padding-right: 0;
  padding-left: 0;

  color: var(--bs-body-color);
  position: relative;
  right: 0;
  width: 100%;
  text-align: end;
  margin: -10px 0 10px 0;
}

.ms-live-search__cancel:hover,
.ms-live-search__cancel:focus-visible {
  color: var(--bs-link-hover-color);
}


/* ==================================================
   Results area
   ================================================== */

/**
 * This area scrolls independently when the result list becomes taller
 * than the available viewport height.
 */
.ms-live-search__body {
  min-height: 180px;

  overflow-y: auto;

  padding: 0.75rem;
}

/**
 * Loading, empty and error messages.
 */
.ms-live-search__status {
  margin: 2rem 1rem;

  color: var(--bs-secondary-color);
  text-align: center;
}

.ms-live-search__status[hidden] {
  display: none;
}

/**
 * Remove default unordered-list formatting.
 */
.ms-live-search__results {
  margin: 0;
  padding: 0;

  list-style: none;
}

.ms-live-search__result + .ms-live-search__result {
  margin-top: 0.25rem;
}


/* ==================================================
   Individual result
   ================================================== */

.ms-live-search__result-link {
  display: block;

  padding: 0.875rem 1rem;

  color: var(--bs-body-color);
  text-decoration: none;

  border-radius: var(--bs-border-radius);
  outline: 0;
}

/**
 * The ms-is-active class is controlled by Arrow-key navigation.
 *
 * Hover, keyboard focus and active-result states intentionally share
 * the same appearance.
 */
.ms-live-search__result-link:hover,
.ms-live-search__result-link:focus-visible,
.ms-live-search__result-link.ms-is-active {
  color: var(--bs-body-color);

  background-color:
          rgba(var(--bs-primary-rgb), 0.1);
}

.ms-live-search__result-title {
  display: block;

  font-weight: 600;
}

.ms-live-search__result-type {
  display: block;

  margin-top: 0.25rem;

  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  text-transform: capitalize;
}


/* ==================================================
   Full-results link
   ================================================== */

/**
 * Visually separate the standard WordPress search link from the five
 * preview results.
 */
.ms-live-search__result--all {
  margin-top: 0.5rem;
  padding-top: 0.5rem;

  border-top:
          var(--bs-border-width)
          solid
          var(--bs-border-color);
}

.ms-live-search__all-results {
  color: var(--bs-link-color);

  font-weight: 600;
}

.ms-live-search__all-results:hover,
.ms-live-search__all-results:focus-visible,
.ms-live-search__all-results.ms-is-active {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}


/* ==================================================
   Keyboard-command footer
   ================================================== */

.ms-live-search__footer {
  flex: 0 0 auto;

  padding: 0.75rem 1rem;

  background-color: var(--ms-live-search-background);

  border-top:
          var(--bs-border-width)
          solid
          var(--bs-border-color);
}

.ms-live-search__commands {
  display: flex;
  align-items: center;
  gap: 1rem;

  margin: 0;
  padding: 0;

  color: var(--bs-secondary-color);
  font-size: 0.875rem;

  list-style: none;
}

.ms-live-search__commands li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/**
 * Keyboard-key appearance.
 */
.ms-live-search__key {
  min-width: 1.75rem;

  padding: 0.2rem 0.35rem;

  color: var(--bs-body-color);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1;
  text-align: center;

  background-color: var(--bs-body-bg);

  border:
          var(--bs-border-width)
          solid
          var(--bs-border-color);

  border-radius: var(--bs-border-radius-sm);

  box-shadow:
          0 1px 1px
          rgba(var(--bs-dark-rgb), 0.08);
}


/* ==================================================
   Mobile layout
   ================================================== */

@media (max-width: 575.98px) {
  /**
   * Reduce the overlay spacing and allow the dialog to use almost the
   * full viewport on small screens.
   */
  .ms-live-search {
    padding: 0.5rem;
  }

  .ms-live-search__modal {
    width: 100%;
    max-height: calc(100vh - 1rem);
  }

  .ms-live-search__form {
    align-items: stretch;
  }

  /**
   * The desktop input is 350px wide. On mobile it becomes fluid.
   */
  .ms-live-search__field,
  .ms-live-search__input {
    width: 100%;
  }

  /**
   * Allow keyboard instructions to wrap instead of overflowing.
   */
  .ms-live-search__commands {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}


.ms-live-search__result-link {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-width: 0;
}


.ms-live-search__result-image {
  flex: 0 0 56px;

  width: 56px;
  height: 56px;

  object-fit: cover;
}


.ms-live-search__result-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  min-width: 0;
}


.ms-live-search__result-title,
.ms-live-search__result-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/**
 * The final "all results" link has no image/content wrapper.
 */
.ms-live-search__all-results {
  display: block;
}