// @page Pattern Library/Components
// @name Calculator
//
// @description
//   The calculator tends to sit in the table toolbar component and is used to refine results from comparison tables, and give estimated info about products based on the input.
//
// @markup
//   <form class='us-calculator'>
//     <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>
//     <div class='us-calculator__input us-input-group'>
//       <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-calculator__btn 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>

.us-calculator {
  position: relative;
  display: block;
  width: 100%;

  &__input {
    display: inline-table;
    margin-right: 10px;
  }

  &__btn {
    display: block;
    margin: .5em;
    width: auto;
  }
}