/// Text input with unit
///
/// @group form
///
/// @example scss - usage
///
///   @include k-TextInputWithUnit;
///
/// @example html
///
/// <div class="k-TextInputWithUnit">
///   <input class="k-TextInput k-TextInputWithUnit__input"
///          placeholder="Lorem ipsum dolor sit amet"
///          type="number" />
///
///   <span class="k-TextInputWithUnit__unit">€</span>
/// </div>

@mixin k-TextInputWithUnit {
  $unit-font: 'regular';

  $unit: 0; // 16px
  $unit-word: -1; // 14px

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

  // color
  $valid-color: map-get($k-colors, 'valid');
  $error-color: map-get($k-colors, 'error');

  // Border
  $unit-color: map-get($k-colors, 'primary-1');
  $unit-color-focus: map-get($k-colors, 'line-2');
  $unit-color-is-valid: map-get($k-colors, 'tertiary-2');
  $unit-color-is-error: map-get($k-colors, 'error-3');
  $unit-color-is-inactive: map-get($k-colors, 'font-2');

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

  $border-size: k-px-to-rem(2px);

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

  // Transition
  $transition-speed: .2s;

  .k-TextInputWithUnit {
    display: table;
    position: relative; // to place an absolute unit

    border-collapse: separate;
    box-sizing: border-box;
  }

  // Input
  .k-TextInputWithUnit__input {
    display: table-cell;
    outline: none; // since we introduce our own focus styles

    transition: all $transition-speed;

    @include k-formRemoveNumberSpinner;

    &:focus ~ .k-TextInputWithUnit__unit {
      border-color: $unit-color-focus;
      color: $color;
    }

    &:disabled + .k-TextInputWithUnit__unit {
      background: $background-disabled;
      border: none;
    }
  }

  .k-TextInputWithUnit--fullWidth {
    width: 100%;

    .k-TextInputWithUnit__unit {
      width: 1%; // To let the input take all the remaining space
    }
  }

  // Unit
  .k-TextInputWithUnit__unit {
    display: table-cell;
    position: relative;
    vertical-align: middle;

    background-color: $unit-background-color;
    border: $border-size solid $border-color;
    border-left: 0;
    border-radius: $input-radius;
    box-sizing: border-box;
    height: 100%;
    padding: 0 k-px-to-rem(15px);

    color: $color;

    white-space: nowrap;

    transition: all $transition-speed;

    @include k-typographyFont($unit-font);
    @include k-typographyFontSize($unit);

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

    &.is-error {
      border-color: $unit-color-is-error;
      color: $error-color;
    }

    &.is-inactive {
      color: $unit-color-is-inactive;
    }
  }

  .k-TextInputWithUnit__unit--tiny {
    padding: 0 k-px-to-rem(10px);
  }

  .k-TextInputWithUnit__unitWord {
    @include k-typographyFontSize($unit-word);
  }
}