input,
select,
textarea {
  @include reset-appearance;
  background-color: $white;
  box-sizing: border-box;
  width: 100%;
  // BUG : Chrome doesnt give many f's about borders and box sizing
  padding: calc(#{$field-padding-vertical} - 1px) $field-padding-horizontal;
  border: 1px solid $gray-light;
  border-radius: 0;
  text-align: left;

  &:focus {
    border: 1px solid $color-info;
  }

  // BUG : If all browser pfs extend placeholder, chrome stops working :(
  &::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
  }

  &::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(0, 0, 0, 0.4);
  }

  &:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
  }

  &:focus:required:invalid {
    border-color: $color-negative;
  }

  &[readonly],
  &[disabled] {
    color: rgba(0, 0, 0, 0.3);
    background-color: $gray-very-light;

    i {
      color: rgba(0, 0, 0, 0.3);
    }

    &:focus {
      border: 1px solid $gray-light;
    }
  }



  &:disabled {
    @extend %input-disabled;
  }
}

.armstrong-input {
  margin-bottom: $form-field-bottom-spacing;
  position: relative;

  // VALIDATION RELATED
  &.show-validation {
    input,
    select,
    textarea,
    .radio-option input,
    .autocomplete-value-display {
      border-color: $color-negative;

      + label {
        &:before {
          border-color: $color-negative;
        }
      }
    }
  }

  .validation-message {
    display: block;
    color: $color-negative;
    margin-top: $form-field-bottom-spacing / 2;
    font-size: 0.8rem;

    &.validation-message-both,
    &.validation-message-icon {
      &:after {
        position: absolute;
        top: $field-padding-vertical+1;
        right: $field-padding-horizontal+1;
        content: '!';
        background-color: $color-negative;
        color: white;
        z-index: 2;
        border-radius: 50%;
        height: 15px;
        width: 15px;
        text-align: center;
      }
    }
  }
}

select{

  background-position: calc(100% - 10px) center;
  background-repeat: no-repeat;
  background-size: 25px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADFUlEQVR4Xu2bS05jQRAEi2NxrlkPzIclF+NUoLfwZsQgME67ozO8d73KzFC+blm+Gz/VDtxVq1f8CEA5BAIgAOUOlMu3AQSg3IFy+TaAAJQ7UC7fBhCAcgfK5dsAAlDuQLl8G0AAyh0ol28DCEC5A+XybQABKHegXL4NIADlDpTLtwEEoNyBcvk2gACUO1Au3wYQgHIHyuXbAAJQ7kC5fBtAAModKJdvAwhAuQPl8m0AASh3oFy+DSAA5Q6Uy7cBBKDcgXL5NoAAlDtQLt8GEIByB8rl2wACUO5AuXwbQADKHSiXbwMIQLkD5fJtAAEod6Bcvg0gAOUOlMtftQHuZ+bHRtm8zszzzLyspmlVAA6ffs3M42qGnbnPz5l5OvO70a+tDMAuECwb/mHw6gDQIVg6fAoAVAiWD58EAA0CRPg0ACgQYMInArA6BA8z8zd6bL/wcMIh8D3JK14RceFTG+AExEoQIMOnA7DK6wAb/g4A3BoCdPi7AHArCPDh7wTAtSHYIvzdALgWBMcPVH8ufBu72TjqNfAjw5K3g63C37EBklfE7cLfGYBLvw62DH93AC4FwbbhNwDwXQi2Dr8FgHMh2D78JgC+CsFxk/h9s7vZFR+84zXwu1fEmvDbGuAzV8Sq8FsB+N/roC78ZgD+haAy/HYAThAc/9qpOPC9dzhqOwRe8XzNeJQAMHKKbSkAMWsZgwWAkVNsSwGIWcsYLACMnGJbCkDMWsZgAWDkFNtSAGLWMgYLACOn2JYCELOWMVgAGDnFthSAmLWMwQLAyCm2pQDErGUMFgBGTrEtBSBmLWOwADByim0pADFrGYMFgJFTbEsBiFnLGCwAjJxiWwpAzFrGYAFg5BTbUgBi1jIGCwAjp9iWAhCzljFYABg5xbYUgJi1jMECwMgptqUAxKxlDBYARk6xLQUgZi1jsAAwcoptKQAxaxmDBYCRU2xLAYhZyxgsAIycYlsKQMxaxmABYOQU21IAYtYyBgsAI6fYlgIQs5YxWAAYOcW2FICYtYzBAsDIKbalAMSsZQwWAEZOsS3fAACaN4HYyD/LAAAAAElFTkSuQmCC)
}