/// Setup a form composer element.
///
/// This mixin will setup an element to like a form composer.
///
/// @group form
///
/// Available for components:
/// - `FormAmountAndCurrency`
/// - `FormPhoneNumber`
///
/// @example scss form composer - Usage
///   @include k-FormComposer;
///
/// @example html
///   <div class="k-FormComposer">
///     <div class="k-FormComposer__element">
///       <input class="k-TextInput k-TextInput--tiny"
///              type="text"
///              placeholder="Lorem ipsum dolor sit amet" />
///     </div>
///
///     <div class="k-FormComposer__element k-FormComposer__element--main">
///       <div class="k-Select"> … </div>
///     </div>
///   </div>

@mixin k-FormComposer {
  $between-form: k-px-to-rem(15px);

  .k-FormComposer {
    display: flex;
  }

  .k-FormComposer__element {
    margin-right: $between-form;
    min-width: 6rem;

    &:last-child {
      margin-right: 0;
    }
  }

  .k-FormComposer__element--main {
    width: 100%;
  }
}