bb-location-facet-search {

  .journey-location-facet-search {

    margin-left: spacing(3);

    &__title,
    &__feedback {
      color: $studio-raven-pale-gray;
      font: {
        size: 15px;
      }
      margin: 0;
      padding-bottom: spacing(5);
    }

    &__form {
      @media (min-width: $screen-sm-min) {
        @include flex-row;
      }
    }

    &__input {
      @include text-input;

      @media (min-width: $screen-sm-min) {
        min-width: 250px;
      }

      @media (min-width: $screen-md-min) {
        min-width: 368px;
      }
    }

    &__button {
      @media (min-width: $screen-sm-min) {
        margin: {
          top: 0;
          left: spacing(10);
        }
        width: spacing(140);

        &--disabled {
          cursor: not-allowed;
          opacity: 0.5;
        }
      }

      @include journey-button;

      background-color: #ffffff;
      border: border(1, $studio-cyan-blue);
      border-radius: 3px;
      color: $studio-cyan-blue;
      font: {
        size: 15px;
        weight: normal;
      }
      margin-top: spacing(20);
      width: 100%;
    }

    &__feedback {
      display: block;
      font-size: 13px;
      padding: {
        top: spacing(5);
        bottom: 0;
      }
    }

    &__typeahead {
      @media (min-width: $screen-sm-min) {
        width: 368px;
      }

      position: absolute;
      right: 14px;
      z-index: 1000;

      &-header {
        background-color: #f4f5f7;
        border: border(1);
        color: #697180;
        font-size: 15px;
        padding: 10px;
      }

      &-location-name {
        color: #333333;
        font-size: 15px;
        margin: 0;

        &:hover {
          cursor: pointer;
        }
      }

      &-location-ref {
        color: #697180;
        font-size: 15px;
        margin: 0;
      }

      > .dropdown-menu {
        border: {
          top: none;
          radius: 0;
        }
        display: initial;
        margin: 0;
        padding: 0;
        position: initial;
        width: 100%;

        > .active {
          background-color: #f4f5f7;

          > a {
            background-color: #f4f5f7;

            &:hover {
              background-color: #f4f5f7;
            }
          }
        }

        > li {
          border-bottom: 1px solid #d1d4dc;

          > a {
            padding: 10px;
          }
        }
      }

      > p {
        margin: 0;
      }
    }
  }

}