presidential-innovation-fellows/code-gov-web

@import '~@code.gov/code-gov-style/_sass/_variables';

.browse {
  margin-bottom: 4.5rem;
  margin-top: 2rem;

  select {
    @include width-three-quarters();
    background-color: #fff;
    border: .1rem solid #5b616b;
    border-radius: 5px;
    color: #212121;
    font-size: 1rem;
    height: 3.7rem;
    line-height: 1.3;
    margin: 0;
    padding: 1rem 3rem 1rem .7em;
    text-transform: none;

    @media screen and (min-width: $medium-screen) {
      font-size: 1.7rem;
      padding: .75rem 3rem .75rem .7em;
    }

  }
}

.button-container {
  display: none;
  margin: 0 auto;
  margin-top: 3rem;

  @media screen and (min-width: $small-screen) {
    display: block;
  }
}

.search-with-icon-button {
  @extend .width-quarter;
  font-size: 0.8em;
  margin: 0;
  margin-left: 10px;
  padding: 1rem 0.7rem;

  @media screen and (min-width: $small-screen) {
    display: none;
  }

  i.search-button-icon {
    color: white;
  }
}

.search-with-text-button {
  display: none;

  @media screen and (min-width: $small-screen) {
    display: inline-block;
  }
}

.browse-by-agency-button {
  padding: 1rem 1.5rem;
  margin-top: 3em;

  @media screen and (max-width: 812px) {
    margin-top: 1em;
  }
}

button {
  border: 1px solid $color-primary;
  color: $color-white;
  font-size: 0.8em;
  margin-left: 10px;
  margin-top: 1.5rem;
  padding: 1rem 0.7rem;

  @media screen and (min-width: $small-screen) {
    font-size: 1.4rem;
    padding: 1rem 4rem;
  }

  &:hover {
    border-color: $brand-purple;
  }

  > * {
    line-height: 1.3;
  }

  &.search-with-icon-button {
    @include width-sixth();
    display: inline-block;
    font-size: 0.8em;
    margin-left: 0;

    @media screen and (min-width: $small-screen) {
      display: none;
    }
  }
}

.search-input-container {
  @include width-three-quarters();

  @media screen and (min-width: $small-screen) {
    @include width-whole();
    margin-right: 0;
  }
}

.search-results-content {
  .search-input-container {
    @include width-three-quarters();
    margin-left: 0;
  }

  .button-container {
    display: inline-block;
  }

  .browse-by-agency-button {
    display: none;
  }
}