/* The icon is the right end of one pill, whose left edge expands in place. */
html[data-theme] #topbar .header-search-host {
  --search-expanded-width:min(440px,calc(var(--search-space,408px) + 32px));
}
html[data-theme] #topbar .header-search-host::before {
  content:"";position:absolute;top:0;right:0;width:32px;height:32px;
  box-sizing:border-box;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);pointer-events:none;
  transition:width .28s cubic-bezier(.22,.68,0,1);
}
html[data-theme] #topbar .header-search-host.search-open::before {width:var(--search-expanded-width)}
html[data-theme] #topbar #searchWrap {
  top:0;right:0;left:auto;width:32px;opacity:0;visibility:hidden;
  clip-path:none;transform:none;background:transparent;box-shadow:none;
  transition:width .28s cubic-bezier(.22,.68,0,1),opacity .16s,visibility 0s .28s;
}
html[data-theme] #topbar .search-open #searchWrap {
  width:var(--search-expanded-width);opacity:1;visibility:visible;
  clip-path:none;transform:none;transition-delay:0s;
}
html[data-theme] #topbar #searchWrap input {
  background:transparent;border:0;padding-left:12px;padding-right:62px;
  outline:none;box-shadow:none;
}
html[data-theme] #topbar #searchClear {right:35px}
html[data-theme] #topbar #headerSearchToggle {
  position:relative;z-index:81;border-color:transparent;background:transparent;
}
html[data-theme] #topbar #headerSearchToggle:hover {background:var(--surface-2)}
@media(max-width:640px){
  html[data-theme] #topbar #suggest {
    position:fixed;left:12px;right:12px;top:calc(var(--search-input-top,6px) + 40px);
    width:auto;
  }
}
@media(prefers-reduced-motion:reduce){
  html[data-theme] #topbar .header-search-host::before,
  html[data-theme] #topbar #searchWrap {transition:none}
}