/// Text input with limit
///
/// A simple text input.
///
/// @group form
///
/// @example scss - Usage
///
///   @include k-TextInput;
///   @include k-TextInputWithLimit;
///
/// @example html
///
///   <div class="k-TextInputLimit">
///     <input class="k-TextInputLimit__input"
///            value="Test" />
///     <div class="k-TextInputLimit__counter">…</div>
///   </div>

@mixin k-TextInputWithLimit {
  $font: 'regular';
  $font-size: -2; // 12px
  $line-height: 1.3;

  // Margin limit
  $margin-limit: k-px-to-rem(5px);

  // Limit colors
  $color: map-get($k-colors, 'font-2');
  $error-color: map-get($k-colors, 'error');
  $active-color: map-get($k-colors, 'font-1');

  .k-TextInputLimit {
    position: relative;
    display: block;
  }

  .k-TextInputLimit__counter {
    @include k-typographyFont($font);
    @include k-typographyFontSize($font-size, $line-height);
    position: absolute;
    right: 0;
    top: 0;

    margin-top: $margin-limit;
    margin-right: $margin-limit;

    color: $color;
    // Add a white border around the text.
    text-shadow: 2px 0 0 #fff,
                 -2px 0 0 #fff,
                 0 2px 0 #fff,
                 0 -2px 0 #fff,
                 1px 1px #fff,
                 -1px -1px 0 #fff,
                 1px -1px 0 #fff,
                 -1px 1px 0 #fff;
    pointer-events: none;

    .k-TextInputLimit.is-disabled & {
      text-shadow: none;
    }

    .k-TextInputLimit__input:focus ~ & {
      color: $active-color;
    }

    &.is-error {
      &,
      .k-TextInputLimit__input:focus ~ & {
        color: $error-color;
      }
    }
  }
}