various input styles

scss/elements/_inputs.scss

@@ -4,6 +4,116 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss
  */
 
+@mixin input-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  display: block;
+}
+
+@mixin input-state($state) {
+  $border-width: 1px;
+  $state-color: $color-gray;
+
+  @if $state == 'error' {
+    $border-width: 2px;
+    $state-color: $color-red;
+
+  } @else if $state == 'warning' {
+    $border-width: 2px;
+    $state-color: $color-gold;
+
+  } @else if $state == 'success' {
+    $border-width: 2px;
+    $state-color: $color-green;
+  }
+
+  .icon {
+    @include icon-color($state-color);
+  }
+
+  .usa-input__message {
+    color: $state-color;
+  }
+
+  input,
+  textarea,
+  select {
+    border-color: $state-color;
+    border-width: $border-width;
+  }
+}
+
+.usa-input {
+  margin: ($gap * 4) 0;
+
+  label {
+    padding: 0 0 $gap 0;
+    @include h4;
+    @include line-max;
+    position: relative;
+
+    .usa-input__help {
+      display: block;
+      @include h5;
+      font-weight: normal;
+      padding-top: $gap / 2;
+      @include line-max;
+    }
+
+    .icon {
+      position: absolute;
+      left: 100%;
+      top: 100%;
+      margin-top: 1.4rem;
+      margin-left: $gap;
+    }
+  }
+
+  input,
+  textarea,
+  select {
+    @include line-max;
+    margin: 0;
+  }
+
+  .usa-input__choices { // checkbox & radio sets
+    legend {
+      padding: 0 0 $gap 0;
+      @include h4;
+    }
+
+    label {
+      font-weight: normal;
+      margin: 0;
+    }
+
+    &.usa-input__choices--inline {
+      label {
+        display: inline-block;
+        padding-right: $gap * 3;
+      }
+    }
+  }
+
+  .usa-input__message {
+    @include h5;
+    display: inline-block;
+    padding-top: $gap;
+  }
+
+  &.usa-input--error {
+    @include input-state('error');
+  }
+
+  &.usa-input--warning {
+    @include input-state('warning');
+  }
+
+  &.usa-input--success {
+    @include input-state('success');
+  }
+}
+
 select {
   border-radius: 0;
   -webkit-appearance: none;
@@ -39,4 +149,4 @@ select {
     min-height: 4.4rem;
   }
 
-}
+}

scss/elements/_typography.scss

@@ -11,7 +11,7 @@
 
 p {
   margin: 0 0 ($gap * 2) 0;
-  max-width: 45em;
+  @include line-max;
 }
 
 h1, h2, h3, h4, h5, h6 {