/// Form info
///
/// A form info element that can take input/checkbox/radio button etc. element
/// with an error message.
///
/// @group form
///
/// @parameter {Map} $input - a input specification
///
/// @example scss - Usage
///
/// @include k-FormInfo;
///
/// <div class="k-FormInfo">
///   <label class="k-FormInfo__label">Nom du label</label>
///   <input class="k-TextInput"
///          type="text"
///          name=""
///          placeholder="Lorem ipsum dolor sit amet" />
/// </div>

@mixin k-FormInfo {
  // Label
  $font: 'regular';

  $label-size: 0; // 16px
  $label-color: map-get($k-colors, 'font-1');

  // Error
  $font-error: 'regular';
  $font-size-error: -2;
  $color-error: map-get($k-colors, 'error');
  $error-line-height: normal;

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

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

    color: $label-color;
  }

  .k-FormInfo__error {
    @include k-typographyFont($font-error);
    @include k-typographyFontSize($font-size-error, $error-line-height);

    margin-top: k-px-to-rem(5px);

    color: $color-error;
  }

  .k-FormInfo__error__link,
  .k-FormInfo__error__link:link,
  .k-FormInfo__error__link:visited,
  .k-FormInfo__error__link:hover,
  .k-FormInfo__error__link:active {
    @include k-typographyFont($font);

    color: inherit;
    text-decoration: underline;
  }
}