.search {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 800px) {
  .search.responsive {
    flex-direction: initial;
    justify-content: initial;
    align-items: initial;
  }
}

.search .search-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 700px;
  font-size: 1.2em;
  box-shadow: 2px 2px 6px var(--c-grey);
  margin-top: calc(var(--spacing) * 2);
}
@media only screen and (min-width: 800px) {
  .search.responsive .search-bar {
    margin-left: calc(var(--spacing) * 2);
    margin-top: 0;
  }
}

.search .search-bar .query {
  flex: 1;
  min-width: 0;
  padding: var(--spacing);
  border: none;
}

.search .search-bar .query:focus {
  transform: rotate(0); /* Stops focus outline from being occluded by following elements. */
}

.search .search-bar button[type="submit"] {
  padding: var(--spacing);
}

.search .search-bar .search-icon {
  vertical-align: middle;
}

.search .search-bar .search-icon path {
  stroke: var(--c-grey-dark);
}