// Forms - Text Field
//
// Single-line text input fields.
//
// :focus         - Field is selected for text input.
// :disabled      - Field is disabled, and it's value can't be interacted with.
// .-search       - Search field appearance.
// .is-loading    - Loading indicator, for example while fetching an AJAX response.
// .has-error     - Error state, used for validation issues.
//
// Markup:
//   <input type="text" class="text-field {{modifier_class}}" placeholder="Type something...">
//
// Styleguide Forms - Text Field
.text-field {
  width: 100%;
  font-family: $font-proxima-nova;
  font-size: $font-regular;
  border: 1px solid $light-gray;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: $lg-border-radius;
  background-clip: padding-box;
  padding: ($base-spacing / 2);
  margin: 0;
  transition: border 0.5s;

  // Fixes styling in Firefox/Safari; non-standard properties so not autoprefixed.
  -moz-appearance: none;
  -webkit-appearance: none;

  &:focus {
    outline: none;
    border: 1px solid $blue;
    box-shadow: 0 0 3px $blue;
  }

  &:disabled {
    color: $med-gray;
    background-color: lighten($light-gray, $tint);
    cursor: not-allowed;
  }

  &.-search, &.is-loading {
    background-repeat: no-repeat;
    background-position: 12px 50%;
    background-size: 18px 18px;
    padding-left: 36px;
  }

  &.-search {
    background-image: data-url($data-search-svg);
    padding-right: 0;

    // Search "cancel" button does not render properly on fields with padding.
    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

    .modernizr-no-svg & {
      background-image: neue-asset-url("images/fallbacks/search.png");
    }
  }

  &.is-loading {
    background-image: data-url($data-spinner-svg);

    .modernizr-no-svg &,
    .modernizr-no-smil & {
      background-image: neue-asset-url("images/fallbacks/spinner16.gif");
    }
  }

  &.has-error {
    border-color: $error-color;
  }
}


// Textarea Field
//
// Multi-line text area fields. Can be resized vertically on capable browsers.
//
// Markup:
//   <textarea name="textarea" class="text-field" placeholder="Write something here..."></textarea>
//
// Styleguide Forms - Textarea Field
textarea.text-field {
  resize: vertical;
}