// @page Pattern Library/Components
// @name Table toolbar
//
// @description
//   The table toolbar sits above comparison tables and holds search refinement and filtering tools.
//
// @markup
//   <div class="us-table-toolbar">
//     <div class="us-table-toolbar__wrapper">
//   <form class='us-calculator'>
//     <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>
//     <div class='us-input-group us-calculator__input'>
//       <div class='us-input-group__box'>£</div>
//       <input type='text' class='us-form-input' pattern='[0-9]*' name='amount' id='amount' value='3000' />
//     </div>
//     <button class='us-btn us-btn--primary'>Update results</button>
//     <div class='us-tooltip us-tooltip--right'>
//       <div class='us-tooltip__wrapper'>
//         <div class='us-tooltip__icon'></div>
//         <div class='us-tooltip__note'>
//           <div class='us-tooltip__arrow'></div>
//           Note that this is illustrative and this figure does not reflect the credit limit you will be offered.
//         </div>
//       </div>
//     </div>
//   </form>
//     </div>
//     <div class="us-table-toolbar__wrapper us-table-toolbar__wrapper--right">
//       <div class="us-table-toolbar__sort">
//         <h3 class="us-table-toolbar__heading">Sort by:</h3>
//         <select class="us-form-select name="sort"">
//           <option value="popularity">Popularity</option>
//           <option value="apr">Lowest APR</option>
//           <option value="min-credit-limit">Minimum credit limit</option>
//           <option value="max-credit-limit">Maximum credit limit</option>
//         </select>
//       </div>
//     </div>
//   </div>

.us-table-toolbar {
  background: $c-bggrey;
  padding: $gutter-width / 2;
  border-bottom: 1px solid $c-keylinegrey;
  margin: 0 auto $gutter-width / 2;

  @include respond-to(tablet) {
    display: flex;
    background-color: transparent;
    border-bottom: 0;
    padding: $gutter-width $gutter-width / 2;
    flex-direction: row;
  }

  &__wrapper {
    display: flex;
    flex: 1 1;

    &:first-child {
      margin-bottom: $gutter-width / 2;

      @include respond-to(tablet) {
        margin-bottom: 0;
      }
    }
  }

  &__sort {
    width: 100%;

    @include respond-to(tablet) {
      width: auto;
    }

    select {
      width: 100%;

      @include respond-to(tablet) {
        width: auto;
      }
    }
  }

  &__wrapper--right {
    justify-content: flex-end;
  }

  &__heading {
    font-size: 18px;
  }
}