.search_widget-container {
  --header-color: var(--bs-body-color);
  --header-hover-color: var(--bs-link-hover-color);

  --search-widget-box-shadow-width: .25rem;
  --search-widget-dropdown-margin: 3px;

  --searchbox-backdrop-zindex: 102;
  --search-widget-dropdown-zindex: 103;
  --search-widget-form-group-zindex: 104;
}

/* @media (pointer: fine) {.search_widget-container {}} */

@media only screen and (min-width: 992px) {
  #search_widget {
    min-width: 16.5rem;
  }
}
#mobile-search__container .search_widget-container {
  padding-block: .35rem;
}

#search_widget:has(.search-input:focus, .search-widgets__dropdown:not(.d-none)) .input-group {
  box-shadow: 0 0 0 var(--search-widget-box-shadow-width) rgba(var(--form-control-focus-box-shadow-rgb), .5);
  border-radius: var(--bs-border-radius);
}
#search_widget .input-group .form-control:focus {
  box-shadow: none;
}

#search_widget:has(.search-input:focus, .search-widgets__dropdown:not(.d-none)) .form-group {
  z-index: var(--search-widget-form-group-zindex);
}
#search_widget .search-widgets__dropdown {
  z-index: var(--search-widget-dropdown-zindex);
  --bs-border-radius: 1.25rem;
  top: calc(100% + var(--search-widget-box-shadow-width) + var(--search-widget-dropdown-margin));
  box-shadow: 0 0 0 var(--search-widget-box-shadow-width) rgba(var(--form-control-focus-box-shadow-rgb), .5);
  /* border-top-left-radius: 0;
  border-top-right-radius: 0; */
}
/* #search_widget:has(.search-widgets__dropdown:not(.d-none)) :is(.input-group, .input-group > .form-control) {
  border-bottom-left-radius: 0;
}
#search_widget:has(.search-widgets__dropdown:not(.d-none)) :is(.input-group, .input-group > .btn) {
  border-bottom-right-radius: 0;
} */

.searchbox-backdrop {
  --bs-backdrop-zindex: var(--searchbox-backdrop-zindex);
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  overflow: hidden;
  /* visibility: hidden; */
  transition: max-height 0s ease 0.25s, opacity 0.25s ease 0s;
}
.search_widget-container:has(.search-input:focus, .search-widgets__dropdown:not(.d-none)) .searchbox-backdrop {
  opacity: var(--bs-backdrop-opacity);
  max-height: 100vh;
  pointer-events: initial;
  /* visibility: visible; */
  transition: max-height 0s ease 0s, opacity 0.25s ease 0s;
}