// This search bar appears in the header of the page.
//
// Styleguide Search

.search-box {
  @extend %clearfix;
  position: relative;
  margin: 0 auto;
  padding: $baseline-unit 0;
  background-color: $color-search-background;
  width: 100%;
}

.search-box__input {
  @extend %font-heading-medium;
  width: 100%;
  height: $baseline-unit*7;
  padding-left: $baseline-unit*2;
  border: 0;
  background-color: $color-off-white;

  &:focus {
    outline: 0;
  }

  &::-webkit-input-placeholder {
    color: $color-search-text;
  }

}

.search-box__submit {
  @extend .button--unstyled;
  position: absolute;
  bottom: 0;
  right: 0;
  width: $baseline-unit*7;
  height: $baseline-unit*7;
  font-size: 24px;
  color: $color-search-text;

  .icon--search {
    position: absolute;
    top: $baseline-unit*2;
    left: $baseline-unit*2;
  }

  &:focus {
    outline: 0;
    background-color: $color-green-secondary;
    color: $color-white;

    .icon--search {
      @extend .icon--search-white;
    }
  }
}

// This search bar appears in the header of the page.
//
// Styleguide Search

.search-box {
  @extend %clearfix;
  position: relative;
  margin: 0 auto;
  padding: $baseline-unit;
  background-color: $color-search-background;
  width: 100%;
}

.search-box__input {
  @extend %font-heading-medium;
  width: 100%;
  height: $baseline-unit*7;
  padding-left: $baseline-unit*2;
  border: 0;
  background-color: $color-off-white;

  &:focus {
    outline: 0;
  }

  &::-webkit-input-placeholder {
    color: $color-search-text;
  }

}

.search-box__submit {
  @extend .button--unstyled;
  position: absolute;
  bottom: 0;
  right: 0;
  width: $baseline-unit*7;
  height: $baseline-unit*7;
  font-size: 24px;
  color: $color-search-text;

  .icon--search {
    position: absolute;
    top: $baseline-unit*2;
    left: $baseline-unit*2;
  }

  &:focus {
    outline: 0;
    background-color: $color-green-secondary;
    color: $color-white;

    .icon--search {
      @extend .icon--search-white;
    }
  }
}

Adjust pading on search box for mobile
Adjust pading on search box for mobile
