MetaPhase-Consulting/State-TalentMAP

// Overrides styles for the react-select module
$input-height: 40px;

.results-search-bar {
  background-color: $tm-dark-blue;
  color: $color-white;
  height: auto;
}

.results-multi-search {
  $font-size: 16px;

  color: $color-white;
  padding-top: 1px;

  select {
    font-size: $font-size;
    height: $input-height;
    padding-bottom: 0;
    padding-top: 0;
  }

  label,
  legend {
    font-size: $font-size;
    font-weight: normal;
    margin: 0 0 5px;
  }

  legend {
    text-transform: capitalize;
  }

  .search-sub-text {
    font-size: .7em;
    font-style: italic;
    margin: 5px 0 0 10px;
    position: absolute;
    white-space: nowrap;
  }

  .Select {
    font-size: $font-size;
  }

  .Select-control {
    border-radius: 0;
    height: $input-height;
  }

  .Select-multi-value-wrapper {
    height: $input-height - 5; // offset height to match
  }

  .Select-placeholder {
    padding-top: 3px;
  }

  .results-search-bar {
    background-color: $tm-dark-blue;
    height: auto;
  }

  .search-keyword {
    position: relative;
  }

  .search-submit-button {
    button {
      font-size: .9em;
      line-height: rem(16);
      margin-top: 3px;
      min-width: 90px;
      padding: 12px 10px;
    }
  }

  @media screen and (max-width: $screen-md-max) {
    .usa-width-one-twelfth:nth-child(3n) {
      margin-right: 4.82916%;
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    .search-results-inputs {
      margin-right: 2%;
    }
  }
}

.results-single-search {

  padding-bottom: 2px;

  .search-bar-container {
    padding-top: 3px;
  }

  @media screen and (max-width: $screen-md-max) {
    .search-bar-container {
      form {
        display: flex;
      }

      fieldset {
        flex: 2;
        margin: 0;
      }

      .search-submit-button {
        flex: 1;
        max-width: 190px;
      }

      button {
        margin-left: 25px;
      }
    }
  }

  .search-results-inputs {
    width: 100%;
  }
}

.results {
  .homepage-offset.results-single-search {
    padding-bottom: 2px;
    padding-top: 0;

    .search-results-inputs {
      padding-top: 14px;
    }
  }
}