// Lightning Design System 2.29.1
.slds-input,
.slds-input_faux {
  line-height: border-box-line-height($height-tappable);
}

.slds-input {
  line-height: border-box-line-height($height-tappable);

  &[readonly] {
    font-size: $font-size-5;
  }

  /*
   * It's important to keep these selectors scoped tightly because certain input types have
   * platform-native styles we don't want to override such as search. In the past, we have
   * not overridden the appearance property so tread carefully.
   *
   * These are considered safe because they fall under '-webkit-appearance: textfield' by Webkit
   * which primarily renders a platform-native inner gradient.
   */
  &[type='text'],
  &[type='email'],
  &[type='url'],
  &[type='tel'] {
    // stylelint-disable property-no-vendor-prefix
    -webkit-appearance: none; // Remove Webkit insertion of gradient from -webkit-appearance: textfield
    // stylelint-enable property-no-vendor-prefix
  }

  // Temporary fix for misaligned selection for datepickers in Android
  &[type='date'],
  &[type='datetime'],
  &[type='datetime-local'],
  &[type='time'],
  &[type='week'],
  &[type='month'] {
    display: inline-flex;
  }

  /**
   * Platform-native styled inputs using 'appearance' CSS property set their own min-height and our line-height isn't recognized
   * until a value is selected (e.x. date input). For mobile devices, this causes height discrepancies before and after selecting
   * a value. We need to set an explicit height to keep it consistent.
   */
  &[type='date'],
  &[type='datetime-local'],
  &[type='month'],
  &[type='time'] {
    height: $height-tappable;
  }

  &[type='date'],
  &[type='datetime-local'] {
    white-space: nowrap;
    padding: 0;
  }
}

.slds-input-has-icon {

  .slds-input__icon {
    @include square($square-icon-medium-content);
    margin-top: (($square-icon-medium-content * 0.5) * -1);
  }
}

.slds-input__icon_left,
.slds-input__icon--left {

  .slds-input__icon {
    left: $spacing-x-small;
  }
}

.slds-input__icon_right,
.slds-input__icon--right {

  .slds-input__icon {
    right: $spacing-x-small;
  }
}

.slds-input__icon_left-right,
.slds-input__icon--left-right {

  .slds-input__icon_left,
  .slds-input__icon--left {
    left: $spacing-x-small;
  }

  .slds-input__icon_right,
  .slds-input__icon--right {
    right: $spacing-x-small;
  }
}

.slds-input__icon-group_right {

  .slds-input__spinner {
    right: calc(#{$spacing-large} + #{$spacing-xx-small});
  }
}