dynamic/silverstripe-locator-frontend-react

// =================
// == Search Form ==
// =================
.locator-search {
  .search {
    margin-top: 5px;

    @include media-breakpoint-up(sm) {
      margin: 0;
    }
  }

  .form-group,
  .form-control {
    box-sizing: border-box;
  }

  .fieldset {
    @include make-row-no-gutter;
    @include make-col-ready;
    box-sizing: border-box;

    .input[name=Address] {
      @include make-col(12);

      @include media-breakpoint-up(md) {
        flex: initial;
        flex-grow: 1;
      }
    }

    .radius-dropdown,
    .category-dropdown {
      @include make-col-ready-no-gutter;
      @include make-col(12);
    }

    .category-dropdown + .radius-dropdown,
    .category-dropdown {
      @include media-breakpoint-up(md) {
        @include make-col(5);
      }
    }

    .category-dropdown + .radius-dropdown {
      @include media-breakpoint-up(md) {
        padding-left: 3px;
      }
    }

    .category-dropdown {
      @include media-breakpoint-up(md) {
        padding-right: 3px;
      }
    }

    select {
      max-width: 100%;
    }
  }

  .input[name=Address] button {
    font-size: 14px;
    height: 100%;
    line-height: 1.428;
    max-width: 100%;
    padding: 0 10px;
    width: auto;
  }

  .input[name=Address] .autocomplete-root {
    border: 0;
    padding: 0;
  }
}

.autocomplete-root {
  position: relative;

  .autocomplete-dropdown-container {
    background-color: $white;
    min-width: 100%;
    padding: 5px;
    position: absolute;
    z-index: 9999;

    .suggestion {
      cursor: default;
    }
  }
}