[data-search-autocomplete] {
  position: relative;
  overflow: visible;
}

[data-search-autocomplete]:focus-within {
  z-index: 151;
}

[data-search-autocomplete] .search-suggestions {
  height: auto;
  min-height: 0;
  max-height: min(68dvh, var(--search-list-available-height, 560px));
  overscroll-behavior: contain;
  scroll-padding-block: 8px;
  -webkit-overflow-scrolling: touch;
  text-transform: none;
}

[data-search-list-height="120"] { --search-list-available-height: 120px; }
[data-search-list-height="160"] { --search-list-available-height: 160px; }
[data-search-list-height="200"] { --search-list-available-height: 200px; }
[data-search-list-height="240"] { --search-list-available-height: 240px; }
[data-search-list-height="280"] { --search-list-available-height: 280px; }
[data-search-list-height="320"] { --search-list-available-height: 320px; }
[data-search-list-height="360"] { --search-list-available-height: 360px; }
[data-search-list-height="400"] { --search-list-available-height: 400px; }
[data-search-list-height="440"] { --search-list-available-height: 440px; }
[data-search-list-height="480"] { --search-list-available-height: 480px; }
[data-search-list-height="520"] { --search-list-available-height: 520px; }
[data-search-list-height="560"] { --search-list-available-height: 560px; }

[data-search-autocomplete] .search-suggestions button.search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
}

[data-search-autocomplete] .search-suggestions button.search-suggestion:hover,
[data-search-autocomplete] .search-suggestions button.search-suggestion[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--text);
}

.history-search {
  flex: 1 1 420px;
  width: min(520px, 100%);
  margin-inline: 0;
}

@media (max-width: 1180px) {
  .history-header {
    flex-wrap: wrap;
  }

  .history-search {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }
}