/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

.search-bar {
  position: relative;
  display: flex;
  border-top: 1px solid var(--theme-splitter-color);
  height: var(--editor-searchbar-height);
  transition: outline 150ms ease-out;
}

/* Display an outline on the container when the child input is focused. If another element
   is focused (e.g. a button), we only want the outline on that element */
.search-bar:focus-within:has(input:focus-visible) {
  outline: var(--theme-focus-outline);
  outline-offset: -2px;
}

.search-bar .search-outline {
  flex-grow: 1;
  border-width: 0;
}

/* The outline is set on .search-bar already */
.search-bar input:focus-visible {
  outline: none;
}

.search-bar .result-list {
  max-height: 230px;
}