@import "../type";

$input-placeholder-line-height: 2.9rem;

// Simple form input css reset
@mixin form-input-reset() {
  outline: 0;
  box-sizing: border-box;
  @include ca-type-ideal($size: 16, $weight: $ca-weight-light);
  @include ca-inherit-baseline;
}

@mixin form-input-focus-border($color) {
  border: 1px solid $color;
  box-shadow: 0 0 0 1px $color; // fake a 2px border without moving input
}

// Cross browser mixin for styling of text input placeholder
//
// Example usage:
// ```
// @include input-placeholder {
//  color: $kz-color-white;
// }
// ```
@mixin form-input-placeholder() {
  &::-webkit-input-placeholder {
    @include ca-type-ideal($size: 16, $weight: $ca-weight-light);
    @include ca-inherit-baseline;
    @content;
  }

  &:-moz-placeholder {
    @include ca-type-ideal($size: 16, $weight: $ca-weight-light);
    @include ca-inherit-baseline;
    line-height: $input-placeholder-line-height;
    @content;
  }

  &::-moz-placeholder {
    @include ca-type-ideal($size: 16, $weight: $ca-weight-light);
    @include ca-inherit-baseline;
    line-height: $input-placeholder-line-height;
    @content;
  }

  &:-ms-input-placeholder {
    @include ca-type-ideal($size: 16, $weight: $ca-weight-light);
    @include ca-inherit-baseline;
    line-height: $input-placeholder-line-height;
    @content;
  }
}

// Visually hide a native input but not prevent it from being keyboard focusable
// Useful in situations such as applying custom styling to checkboxes
@mixin form-input-visually-hidden() {
  opacity: 0;
  position: absolute;
  :global(.ideal-sans) & {
    // This is to override bootstrap styles. Remove when appropriate
    position: absolute;
  }
}