Search Form

.search-hero {
  overflow: hidden;
  background-color: $search-field-background;
}

.search-form {
  display: flex;
  grid-area: center;
  align-items: center;

  background-color: $search-field-background;
  border-bottom: 4px solid$search-field-border-color;
}

.search-form__input {
  @extend %heading-font-bold;

  display: block;

  width: 100%;

  line-height: 1.5em; // don't cut off descenders Chrome/FF
  color: $search-field-color;

  appearance: none;
  background-color: $search-field-background;
  border: 0;
  outline: none;
  caret-color: $search-field-caret-color;
}

.search-form__btn {
  background-color: transparent;
  border: 0;

  .icon-search {
    width: 1rem;
    height: 1rem;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .search-form {
    font-size: $font-size-xl;
  }

  .search-form__btn {
    .icon-search {
      width: 2rem;
      height: 2rem;
    }
  }
}