bb-client-search-bar-facet {

  $block: '.client-search-bar';

  .client-search-bar {
    position: relative;
   
    &__input {
      @include text-input;

      // Needed when loading spinner is inside input field on mobile
      padding-right: 40px;

      @media (min-width: $screen-sm-min) {
        padding-right: 10px;
      }
      
      &-container {
        position: relative;
      }
    }

    &__help-text {
      color: $studio-raven-pale-gray;
    }

    &__group--error {
      #{$block}__input {
        border-color: red;
        z-index: 10001;
      }

      #{$block}__button {
        border-color: red;
        border-left: none;
      }

      #{$block}__input:focus ~ #{$block}__button {
        border: 1px red solid;
        border-left: none;
      }
    }

    &__loading-spinner {
      position: absolute !important;
      width: 35px;
      height: 35px;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);

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