%hui-input-wrap {
  border: none;
  display: block;
  position: relative;
}

%hui-input-border {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  border-radius: $border-radius;
  background-color: $white;
  border: 1px solid $grey-lighter;
  border-bottom: 1px solid $grey;
  padding: $x-1 $x-2 0;
}

%hui-input-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9px;
  line-height: 12px;
  color: $grey;
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: $font-copy;
}

%hui-input-disabled {
  -webkit-text-fill-color: $grey-light;
  border-bottom-color: $grey-light;
  color: $grey-light;
}

%hui-input-error {
  border-bottom-color: $error;
  color: $error;
}

%hui-input-focused {
  border-bottom-color: $green-light;
  color: $green-light;
}

%error-message {
  opacity: 1;
  top: 0;
  color: $white;
  background-color: $error;
  margin: 0 $x-2;
}

%hui-input-base {
  float: left;
  position: relative;
  text-align: left;
  font-family: $font-copy;
}

%hui-text-input--readOnly {
  background: none;
  border: none;
  cursor: default;
  &:focus {
    border: none;
    box-shadow: none;
  }
}

%form-instruction {
  padding-bottom: $x-3;
  font-size: $x-4;
}

%hui-placeholder {
  padding: 0 $x-4;
  color: $grey-light;
}

%hui-form-row-label {
  font-size: $x-4;
  display: block;
}

%hui-text-area {
  @extend %hui-input-wrap;
  padding: $x-3;
  min-height: $x-36;
  font-family: "Lato", Helvetica, Arial, sans-serif;
}

%hui-input-focused {
  opacity: 1;
  top: 0;
}