/// Label
///
/// A clickable form label, used in forms, usually over an input.
///
/// Available size modifiers:
/// - `.k-Label--tiny`
/// - `.k-Label--micro`
///
/// @group form
///
/// @example scss - usage
///
///   @include k-Label;
///
/// @example html
///
///   <label class="k-Label" for="age">Age</label>
///   <input id="age" name="age" />
///
///   <span class="k-Label">Gender</span>
///   <label><input type="radio" name="sex" value="m" /> Male</label>
///   <label><input type="radio" name="sex" value="f" /> Female</label>
///   <label><input type="radio" name="sex" value="n" /> Non-binary</label>

@mixin k-Label {
  $font: 'regular';
  $font-step-tiny: 0; // 16px
  $font-step-micro: -1; // 14px
  $line-height-tiny: 1.3;

  .k-Label {
    display: block;

    @include k-typographyFont($font);

    cursor: pointer;
  }

  .k-Label--tiny {
    @include k-typographyFontSize($font-step-tiny, $line-height-tiny);
  }

  .k-Label--micro {
    @include k-typographyFontSize($font-step-micro, $line-height-tiny);
  }

  .k-Label--withoutPointerEvents {
    pointer-events: none;
  }
}