@mixin placeholder() {
  &::placeholder {
    @content;
  }
}

.input-text {
  appearance: none;
  font-family: $font-default;
  font-size: $font-size-form;
  font-weight: $font-weight-semibold;
  color: $color-font-default;
  height: $form-field-height;
  background-color: #fff;
  border: 0;
  border-bottom: $input-border-width solid $colour-grey-lightmid;
  border-radius: 0;
  padding: 0;
  text-align: left;
  width: 100%;

  @include placeholder() {
    color: $colour-grey-darkmid;
  }

  &:focus {
    outline: 0;
  }

  &.has-icon-right {
    padding-right: 3em;
  }

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

  &[disabled],
  &[readonly] {
    background-color: $colour-form-input-disabled;
    color: $colour-font-form-input-disabled;
    padding-left: $input-box-padding-x;
    padding-right: $input-box-padding-x;
    cursor: not-allowed;
  }
}

.input-text--box {
  @include boxedfield();
}

.input-text--no-border {
  border-bottom-width: 0;
}

.input-text--search {
  padding-right: ($input-box-padding-x * 1.5) + $search-form-icon-size;
}