/* Border and  Outline Status styling */
.u-border-outline-error {
  border-color: @input-border__error;
  outline: 1px solid @input-border__error;
  &:hover,
  &.hover {
    border-color: @input-border__error__hover;
    outline: 1px solid @input-border__error__hover;
    outline-offset: 0;
  }
  &:focus,
  &.focus {
    border-color: @input-border__error;
    box-shadow: 0 0 0 1px @input-border__error;
    outline: 1px dotted @input-border__error;
    // Both hover and focus simultaenously
    &:hover,
    &.hover {
      border-color: @input-border__error;
      box-shadow: 0 0 0 1px @input-border__error;
      outline: 1px dotted @input-border__error;
      outline-offset: 2px;
    }
  }
}

.u-border-outline-warning {
  border-color: @input-border__warning;
  outline: 1px solid @input-border__warning;
  &:hover,
  &.hover {
    border-color: @input-border__warning__hover;
    outline: 1px solid @input-border__warning__hover;
    outline-offset: 0;
  }
  &:focus,
  &.focus {
    border-color: @input-border__warning;
    box-shadow: 0 0 0 1px @input-border__warning;
    outline: 1px dotted @input-border__warning;
    // Both hover and focus simultaenously
    &:hover,
    &.hover {
      border-color: @input-border__warning;
      box-shadow: 0 0 0 1px @input-border__warning;
      outline: 1px dotted @input-border__warning;
      outline-offset: 2px;
    }
  }
}

.u-border-outline-success {
  border-color: @input-border__success;
  outline: 1px solid @input-border__success;
  &:hover,
  &.hover {
    border-color: @input-border__success__hover;
    outline: 1px solid @input-border__success__hover;
    outline-offset: 0;
  }
  &:focus,
  &.focus {
    border-color: @input-border__success;
    box-shadow: 0 0 0 1px @input-border__success;
    outline: 1px dotted @input-border__success;
    // Both hover and focus simultaenously
    &:hover,
    &.hover {
      border-color: @input-border__success;
      box-shadow: 0 0 0 1px @input-border__success;
      outline: 1px dotted @input-border__success;
      outline-offset: 2px;
    }
  }
}

.a-text-input {
  // Reset the browser's default styling.
  appearance: none;
  display: inline-block;
  padding: unit(7px / @base-font-size-px, em);
  border: 1px solid @input-border;
  background: @input-bg;
  color: @input-text;

  &:hover,
  &.hover {
    border-color: @input-border__hover;
    outline: 1px solid @input-border__hover;
  }

  &:focus,
  &.focus {
    border-color: @input-border__focused;
    box-shadow: 0 0 0 1px @input-border__focused;
    outline: 1px dotted @input-border__focused;

    // The outline-offset property is not supported everywhere (e.g. IE)
    // but it adds a nice touch in browsers where it is.
    outline-offset: 2px;
  }

  &:disabled {
    &,
    &:hover,
    &.hover,
    &:focus,
    &.focus {
      color: @input-text__disabled;
      background-color: @input-bg__disabled;
      cursor: not-allowed;

      // Cancel the hover and focus states.
      border-color: @input-border;
      outline: none;
    }
  }

  &--error {
    .u-border-outline-error();
  }

  &--warning {
    .u-border-outline-warning();
  }

  &--success {
    .u-border-outline-success();
  }
}

// Overrides extra left padding.
// http://stackoverflow.com/questions/11127891/how-can-i-get-rid-of-horizontal-padding-or-indent-in-html5-search-inputs-in-webk
::-webkit-search-decoration {
  appearance: none;
}

// Change place holder text to dark gray (#43484e).
::placeholder {
  color: @input-text__placeholder;
}

// Force placeholder text color change for "date" field type.
input[type='date']::-webkit-datetime-edit {
  color: @input-text__placeholder;
}