/* Override the extension's injected styles with enough specificity for either theme. */
#editor .ace_search {
  --search-bg: #eeeef2;
  --search-field: #ffffff;
  --search-fg: #303038;
  --search-border: #777785;
  --search-hover: #dde5f2;
  --search-accent: #164f9c;
  --search-error: #b32030;
  width: 360px;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--search-fg);
  background: var(--search-bg);
  border-color: var(--search-border);
}
#editor .ace_search_form,
#editor .ace_replace_form {
  display: flex;
}
#editor .ace_search_field {
  min-width: 0;
  width: 0;
  flex: 1;
  color: var(--search-fg);
  background: var(--search-field);
  border-color: var(--search-border);
}
#editor .ace_search_field::placeholder {
  color: var(--search-fg);
  opacity: 1;
}
#editor .ace_search_field:focus {
  outline: 2px solid var(--search-accent);
  outline-offset: -2px;
}
#editor .ace_searchbtn,
#editor .ace_button {
  color: var(--search-fg);
  background: var(--search-field);
  border-color: var(--search-border);
  opacity: 1;
}
#editor .ace_searchbtn:hover,
#editor .ace_button:hover {
  background: var(--search-hover);
}
#editor .ace_button.checked {
  border-color: var(--search-accent);
  background: var(--search-hover);
}
#editor .ace_searchbtn.prev::after,
#editor .ace_searchbtn.next::after {
  border-color: var(--search-fg);
}
#editor .ace_searchbtn_close {
  background: none;
  color: var(--search-fg);
}
#editor .ace_searchbtn_close::after {
  content: "×";
}
#editor .ace_searchbtn_close:hover {
  background: var(--search-hover);
}
#editor .ace_search_form.ace_nomatch {
  outline: 2px solid var(--search-error);
}
@media (prefers-color-scheme: dark) {
  #editor .ace_search {
    --search-bg: #252b36;
    --search-field: #191d25;
    --search-fg: #e4e8f0;
    --search-border: #808b9e;
    --search-hover: #394356;
    --search-accent: #95c8ff;
    --search-error: #ff9292;
  }
}