/// Text input
///
/// A simple text input.
///
/// @group form
///
/// @example scss - Usage
///
///   @include k-TextInput;
///
/// @example html
///
///   <input class="k-TextInput"
///          type="text"
///          placeholder="Lorem ipsum dolor sit amet" />

@mixin k-TextInput {
  $border-width: k-px-to-rem(2px);

  $font: 'light';
  $font-size: -1; // 14px
  $line-height: 1.3;

  $tiny-height: k-px-to-rem(40px);
  $height: k-px-to-rem(50px);

  // Input radius
  // Chrome forced a default `border-radius: 4px`, we have to set it to 0px.
  $input-radius: 0;

  // Base
  $color: map-get($k-colors, 'font-1');
  $border-color: map-get($k-colors, 'line-1');
  $background: map-get($k-colors, 'background-1');

  // Focus
  $border-focus: map-get($k-colors, 'line-2');

  // Disabled
  $color-disabled: map-get($k-colors, 'font-2');
  $border-disabled: map-get($k-colors, 'line-1');
  $background-disabled: map-get($k-colors, 'line-1');

  // Placeholder
  $color-placeholder: map-get($k-colors, 'font-2');

  // Is-valid
  $color-is-valid: map-get($k-colors, 'tertiary-2');
  $border-is-valid: map-get($k-colors, 'tertiary-2');

  // Is-error
  $color-is-error: map-get($k-colors, 'error-3');
  $border-is-error: map-get($k-colors, 'error-3');

  // Others
  $horizontal-padding: 15px;
  $vertical-padding: 10px;
  $digit-length: 15px;

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

    box-sizing: border-box;
    border: $border-width solid $border-color;
    border-radius: $input-radius;
    background: $background;

    width: 100%;
    height: $height;
    padding: k-px-to-rem($vertical-padding) k-px-to-rem($horizontal-padding);
    color: $color;
    transition: color .2s, border-color .2s;

    appearance: none;

    &::placeholder {
      color: $color-placeholder;
    }

    &::-moz-placeholder {
      color: $color-placeholder;
    }

    &:focus {
      outline: none;
      border-color: $border-focus;
    }

    &:disabled {
      border-color: $border-disabled;
      background-color: $background-disabled;
      color: $color-disabled;

      cursor: not-allowed;

      &::placeholder {
        opacity: 1;
      }

      &::-moz-placeholder {
        opacity: 1;
      }
    }

    &.is-valid {
      border-color: $border-is-valid;
      color: $color-is-valid;

      &:focus {
        border-color: $border-focus;
        color: $color;
      }
    }

    &.is-error {
      border-color: $border-is-error;
      color: $color-is-error;
      box-shadow: none;

      &:focus {
        border-color: $border-focus;
        color: $color;
      }
    }
  }

  .k-TextInput--twoDigits {
    width: k-px-to-rem($horizontal-padding * 2 + $digit-length * 2);
    text-align: center;
  }

  .k-TextInput--twelveDigits {
    width: k-px-to-rem($horizontal-padding * 2 + $digit-length * 12);
  }

  .k-TextInput--tiny {
    height: $tiny-height;
  }
}