.search-bar {
  @include grid-row;
  @include panel-base;
  @include panel-theme-default;
  @include panel-margin;

  padding: $gap;
  flex-wrap: wrap;
  border-top: none;
  border-bottom: none;

  @media (min-width: 1000px) {
    flex-wrap: nowrap;
  }

  .usa-input {
    margin: $gap 0 0 $gap;
    height: $search-input-height;
    position: relative;

    label {
      @include hide;
    }
  }

  .search-bar__filters {
    display: flex;
    flex: 1;
    flex-grow: 1;
    flex-basis: 100%;

    .usa-input {
      flex-basis: 100%;

      @media (min-width: 1000px) {
        margin-top: 0;
      }

      &:first-child {
        margin-left: 0;

        @media (min-width: 1000px) {
          margin-left: $gap;
        }
      }
    }
  }

  .search-input {
    margin-left: 0;
    margin-top: 0;
    flex-basis: 100%;

    input[type="search"] {
      width: auto;
      height: $search-input-height;
      width: calc(100% - #{$search-button-width});
      max-width: none;
      font-size: 1.6rem;
    }

    button {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      padding: 0;
      height: $search-input-height;
      width: $search-button-width;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      text-align: center;

      &:after {
        content: url("#{$asset-path}/icons/search.svg");
        display: inline-block;
        width: 1.6rem;
        height: 1.6rem;
      }
    }
  }
}
