/// Location input
///
/// @group form
///
/// @example scss - usage
///
///   @include k-LocationInput;
///
/// @example html
///
///   <div class="k-LocationInput">
///     <div class="k-LocationInput__icon">
///       <svg />
///     </div>
///     <div class="k-LocationInput__group">
///       <input class="k-LocationInput__input" />
///       <PlacesAutocomplete class="k-LocationInput__autocomplete" />
///     </div>
///   </div>

@mixin k-LocationInput {
  $font: 'light';
  $font-size: -1;
  $line-height: 1.3;
  $height: k-px-to-rem(50px);

  $icon-margin: k-px-to-rem(15px);

  // Autocomplete color
  $color-main-text: map-get($k-colors, 'font-1');
  $color-secondary-text: map-get($k-colors, 'font-1');
  $border-color-autocomplete: map-get($k-colors, 'line-1');

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

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

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

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

  $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;

  .k-LocationInput {
    .k-LocationInput__group {
      position: relative;
      width: 100%;
    }

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

      position: relative;
      display: block;
      box-sizing: border-box;
      outline: none;
      padding: 0 k-px-to-rem(15px) 0 k-px-to-rem(35px);

      width: 100%;
      height: $height;
      background: $background-color;
      border: $border-size solid $border-color;
      border-radius: $input-radius;
      color: $color;

      transition: color .2s, border-color .2s;

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

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

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

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

        cursor: not-allowed;

        &::placeholder {
          opacity: 1;
        }

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

    .k-LocationInput__autocomplete {
      background-color: $background-color;
      border: $border-size solid $border-color-autocomplete;
    }

    .k-LocationInput__autocompleteItem {
      padding: k-px-to-rem(12px);
      color: $color-placeholder;
    }

    .k-LocationInput__autocompleteItem--active {
      background-color: $background-color-active;
    }

    .k-LocationInput__autocompleteItem__mainText {
      @include k-typographyFont($font);
      margin-left: k-px-to-rem(10px);
      color: $color-main-text;
    }

    .k-LocationInput__autocompleteItem__secondaryText {
      @include k-typographyFont($font);
      color: $color-secondary-text;
    }

    .k-LocationInput__icon {
      position: absolute;
      z-index: 1;

      margin: $icon-margin 0 0 $icon-margin;
    }
  }
}