.backdrop {
  --top-spacing: var(--rhythm-8);
  --side-spacing: var(--rhythm-2);

  align-items: start;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding-top: var(--top-spacing);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000;
}

.search-container {
  --search-bar-height: var(--rhythm-6);
  background: #fff;
  max-height: calc(100vh - var(--top-spacing) * 2);
  overflow: hidden;
  width: calc(100% - var(--side-spacing) * 2);

  &:not(.with-results) {
    height: var(--search-bar-height);
  }
  &.with-results .search-bar-container {
    border-bottom: 1px solid var(--color-neutral-light);
  }

  .search-bar-container {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .search-bar-container,
  .search-results-container {
    background: inherit;
  }

  .search-results-container {
    --vertical-spacing: var(--rhythm-1);

    .results {
      max-height: calc(100vh - var(--top-spacing) * 2 - var(--search-bar-height));
      overflow: auto;
    }

    .search-results {
      padding: var(--vertical-spacing) 0;
    }

    :global(.sw-loading-dots:not(.small)) {
      margin: var(--rhythm-12) auto;
    }
  }
}

@media (max-width: 639px) {
  .backdrop {
    /* add extra spacing on mobile to prevent "Do you have a question" block to come over the search results */
    max-height: calc(100vh - var(--top-spacing) * 2 - var(--rhythm-2));
  }
}
@media (min-width: 640px) {
  .backdrop {
    --top-spacing: var(--rhythm-14);
  }
  .search-container {
    max-width: 784px;
    width: 80%;
  }
}
