/// Search input with icon.
///
/// @group form
///
/// @example scss - usage
///
///   @include k-SearchInput;
///
/// @example html
///
///   <form class="k-SearchInput">
///     <input class="k-TextInput k-SearchInput__input"
///            type="text"
///            name="foobar"
///            placeholder="Foobar" />
///     <button type="submit" aria-label="Search" class="k-SearchInput__submit">
///       <svg width="14"
///            height="14"
///            viewBox="-0.7 -0.7 18 18"
///            xmlns="http://www.w3.org/2000/svg">
///         <circle class="k-SearchInput__submit__svgCircle"
///                 cx="7"
///                 cy="7"
///                 r="7"
///                 stroke="#333"
///                 stroke-width="1.1"
///                 fill="none" />
///           <path class="k-SearchInput__submit__svgPath"
///                 fill="#333"
///                 d="M13 11 L17 15 L15.5 16.5 L11.5 12.7z" />
///       </svg>
///     </button>

@mixin k-SearchInput {
  // Size
  $icon-size: k-px-to-rem(14px);
  $submit-horizontal-padding: k-px-to-rem(13px);
  $border-width: k-px-to-rem(2px);

  // Colors

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

  $search-submit-width: $submit-horizontal-padding * 2 + $icon-size;
  $search-input-width: k-px-to-rem(160px);
  $search-width: $search-input-width + $search-submit-width;

  // Focus
  $submit-focus-color: map-get($k-colors, 'background-1');
  $border-focus: map-get($k-colors, 'font-1');
  $submit-focus-background: map-get($k-colors, 'font-1');

  // Hover
  $submit-hover-color: map-get($k-colors, 'background-1');
  $border-hover: map-get($k-colors, 'primary-2');
  $submit-hover-background: map-get($k-colors, 'primary-2');

  // Active
  $submit-active-color: map-get($k-colors, 'background-1');
  $border-active: map-get($k-colors, 'primary-3');
  $submit-active-background: map-get($k-colors, 'primary-3');

  // Border radius Text - input
  $submit-border-radius: 0;

  // Tiny height from k-TextInput
  $submit-tiny-height: k-px-to-rem(40px);

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

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

    border-collapse: separate;
    box-sizing: border-box;
    width: $search-width;

    white-space: nowrap; // Prevent newline in mobile view
  }

  .k-SearchInput__input {
    vertical-align: middle;

    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    box-sizing: border-box;
    width: $search-input-width !important;

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

    // You can add this class in JavaScript to manage `k-SearchInput__input`
    // hover style depending on a following sibling hover state.
    &.is-hover ~ .k-SearchInput__submit {
      border-color: $border-hover;
    }

    // You can add this class in JavaScript to manage `k-SearchInput__input`
    // active style depending on a following sibling active state.
    &.is-active ~ .k-SearchInput__submit {
      border-color: $border-active;
      background-color: $submit-active-background;
    }
  }

  .k-SearchInput__submit {
    display: table-cell;
    vertical-align: middle;

    box-sizing: border-box;
    width: $search-submit-width;
    height: 100%;

    background-color: $background-color;
    border-top-right-radius: $submit-border-radius;
    border-bottom-right-radius: $submit-border-radius;
    border: $border-width solid $border;
    outline: none; // since we introduce our own focus styles

    color: transparent;
    text-shadow: none;

    cursor: pointer;
    transition: all $transition-speed;

    svg {
      display: block;
      margin: 0 auto;
    }

    &:focus {
      background-color: $submit-focus-background;
      border-left-color: $border-focus;

      & .k-SearchInput__submit__svgPath {
        fill: $submit-focus-color;
      }

      & .k-SearchInput__submit__svgCircle {
        stroke: $submit-focus-color;
      }
    }

    &:hover {
      background-color: $submit-hover-background;
      border-left-color: $border-hover;

      & .k-SearchInput__submit__svgPath {
        fill: $submit-hover-color;
      }

      & .k-SearchInput__submit__svgCircle {
        stroke: $submit-hover-color;
      }
    }

    &:active {
      background-color: $submit-active-background;
      border-left-color: $border-active;

      & .k-SearchInput__submit__svgPath {
        fill: $submit-active-color;
      }

      & .k-SearchInput__submit__svgCircle {
        stroke: $submit-active-color;
      }
    }
  }

  .k-SearchInput__submit__svgPath {
    fill: $submit-color;
  }

  .k-SearchInput__submit__svgCircle {
    stroke: $submit-color;
  }

  .k-SearchInput__submit--tiny {
    height: $submit-tiny-height;
  }
}