body.search-bar-is-visible .header .application-icon {
  /* shink the application icon when the search bar is visible */
  top: 0.4em;
  width: 2em;
  height: 2em;
}

#search-bar {
  bottom: 0px;
  width: 100%;
  opacity: 0;
  transition: all 150ms ease-in-out;

  /* so that it doesn't alter the layout flow until visible */
  position: absolute;

  /* we don't want the search bar to occlude mouse clicks etc. until it
   is visible; at that point (see the CSS below) we will adjust the
   z-index appropriately */
  z-index: -1000;
}
body.subwindow #search-bar.visible {
  position: fixed;
}
#search-bar.visible {
  opacity: 1;

  /* once visible, we want the search bar to flow normally */
  position: unset;

  /* continuing from above, here we adjust the z-index */
  z-index: 0;
}
#search-container {
  font-family: var(--font-san-serif);
  padding: 1ex;
  background: var(--color-stripe-01);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
#search-input-container {
  flex: 1;
  background: var(--color-ui-01);
  border: solid 1px rgba(0, 0, 0, 0.5);
  border-radius: 3px / 6px;
  padding: 1ex;
  margin-right: 1ex;
  display: flex;
  align-items: center;
}
#search-input {
  flex: 1;
  border: none;
  font-size: inherit;
  background: transparent;
  color: var(--color-text-01);
}
#search-input:focus {
  outline: none;
}
#search-found-text {
  font-weight: 100;
  color: var(--color-brand-03);
}
#search-close-button svg path {
  fill: var(--color-text-02);
  transition: fill 150ms ease-in-out;
}
#search-close-button:hover {
  cursor: pointer;
}
#search-close-button:hover svg path {
  fill: var(--color-base0D);
}
#search-found-text.no-search-yet svg path {
  color: var(--color-text-02);
  font-size: 0.75rem;
}

/* when the search stripe is not visible, make sure the search input is not event worthy */
#search-bar:not(.visible) #search-input {
  display: none;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}