@import 'admin-booking/main_dependencies';
@import 'admin-dashboard/_stylesheets/accessibility';

bb-client-search-bar {
  display: block;
  width: 100%;
  position: relative;

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

  .client-search-bar {

    &__group {
      display: flex;
      width: 100%;
    }

    &__input {
      flex-grow: 1;

      border-radius: $border-radius-base 0 0 $border-radius-base;
      box-shadow: none;
      font-size: $font-size-base;
      outline: none;

      border: 1px  $bb-border solid;
      border-right: none;

      padding: $padding-base-vertical $padding-base-horizontal;

      transition: border-color 0.3s, box-shadow 0.3s;

      &:focus {
        @include outline-border;
        border-right: none;
      }
    }

    &__button {
      flex-grow: 0;

      border: 1px $bb-border solid;
      box-shadow: none;
      border-left: none;
      outline: none;

      padding: 0;

      height: 46px;
      width: 50px;

      background-color: white;
      color: $bb-secondary;

      transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;

      &:hover, &:focus, &:focus:hover {
        background-color: #fafafa;
        outline: 1px $input-border-focus solid;
        outline-offset: -1px;
      }

      &--inactive {
        &:focus:active, &:focus, &:hover, [disabled] {
          background-color: white;
          border-color: $bb-border;
          box-shadow: none;
          cursor: default;
          outline: none;
        }
      }
    }

    &__input:focus ~ #{$block}__button {
      @include outline-border;
      border-left: none;
    }

    &__group--error {

      #{$block}__input {
        border-color: red;
        border-right: none;
        z-index: 10001;
      }

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

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

    }

  }

}