/// @deprecated in favor of k-FormInfo
///
/// Text input with info
///
/// A simple text input.
///
/// @group form
///
/// @parameter {Map} $input - a input specification
///
/// @example scss - Usage
///
/// @include k-TextInputWithInfo((
///  label: (
///    font: 'bold',
///    font-size: -2,
///    color: #333,
///  ),
///  error: (
///    font: 'regular',
///    font-size: -2,
///    color: #ff4146,
///  )
/// ));
///
/// <div class="k-TextInputWithInfo">
///   <label class="k-TextInputWithInfo__label">Nom du label</label>
///   <input class="k-TextInput"
///          type="text"
///          name=""
///          placeholder="Lorem ipsum dolor sit amet" />
/// </div>

@mixin k-TextInputWithInfo($input) {

  // Label
  $font-label: k-string-definition(
    k-map-fetch($input, ('label', 'font')));
  $font-size-label: k-number-definition(
    k-map-fetch($input, ('label', 'font-size')));
  $color-label: k-color-definition(
    k-map-fetch($input, ('label', 'color')));

 // Error
  $font-error: k-string-definition(
    k-map-fetch($input, ('error', 'font')));
  $font-size-error: k-number-definition(
    k-map-fetch($input, ('error', 'font-size')));
  $color-error: k-color-definition(
    k-map-fetch($input, ('error', 'color')));

  .k-TextInputWithInfo__label {
    @include k-typographyFont($font-label);
    @include k-typographyFontSize($font-size-label);

    display: block;
    padding-bottom: k-px-to-rem(10px);

    color: $color-label;
  }

  .k-TextInputWithInfo__error {
    @include k-typographyFont($font-error);
    @include k-typographyFontSize($font-size-error);
    color: $color-error;
  }

}