/// Text input with button
///
/// @group form
///
/// @parameter {Map} $input - a input specification
///
/// @example scss - Usage
///
/// @include k-TextInputWithButton;
///
/// <form role="button">
///   <div class="k-TextInputWithButton">
///     <input
///       class="k-TextInput k-TextInputWithButton__input"
///       type="text"
///       name=""
///       placeholder="Lorem ipsum dolor sit amet"
///     />
///
///     <button
///       class="k-TextInputWithButton__button"
///       type="submit"
///       value="Button"
///     />
///   </div>
/// </form>

@mixin k-TextInputWithButton {
  $font: 'regular';
  $font-size: -1; // 14px
  $line-height: normal;

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

  // Padding button
  $padding-button: k-px-to-rem(30px);

  // Border radius Text - input
  $border-text-input: 0px;

  .k-TextInputWithButton {
    display: flex;
    position: relative;
  }

  .k-TextInputWithButton__input {
    outline: none; // since we introduce our own focus styles
  }

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

    @include k-buttonColors('beryllium');

    position: absolute;
    right: 0;

    height: 100%;
    padding: 0 $padding-button;

    border-radius: $border-text-input;

    outline: none;
    cursor: pointer;

    appearance: none;

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

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

    &.is-disabled {
      cursor: not-allowed;
    }
  }
}