atst/styles/components/_forms.scss

// Form Grid
.form-row {
  margin: ($gap * 4) 0;

  .form-col {
    flex-grow: 1;

    &:first-child .usa-input {
      &:first-child {
        margin-top: 0;
      }
    }

    &:last-child .usa-input {
      &:first-child {
        margin-top: 0;
      }
    }

    .usa-input {
      input {
        max-width: none;
      }
    }
  }

  @include media($medium-screen) {
    @include grid-row;
    align-items: flex-start;
    justify-content: flex-start;

    .form-col {
      &.form-col--half {
        flex-basis: 50%;
      }

      &.form-col--third {
        flex-basis: 33.33%;
      }

      &.form-col--two-thirds {
        flex-basis: 66.66%;
      }

      &.form-col--sixth {
        flex-basis: 16.66%;
      }

      &.form-col--quarter {
        flex-basis: 25%;
      }

      &.form-col--three-quarters {
        flex-basis: 75%;
      }

      .usa-input {
        margin-left: ($gap * 4);
        margin-right: ($gap * 4);

        label {
          .icon-validation {
            left: auto;
            right: -$gap * 3;
          }
        }
      }

      &:first-child {
        .usa-input {
          margin-left: 0;
        }
      }

      &:last-child {
        .usa-input {
          margin-right: 0;
        }
      }
    }
  }
}


.form__sub-fields {
  @include alert;
  @include alert-level('default');
  margin-top: $gap * 2;
  display: block;

  .usa-input {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  > h1, > h2, > h3, > h4, > h5, > h6, > legend {
    @include h3;

    margin: ($gap * 4) 0;

    &:first-child {
      margin-top: 0;
    }

    &.usa-sr-only {
      + .usa-input {
        margin-top: 0;
      }
    }
  }

  &--warning {
    @include alert-level('warning');
    display: block;
  }

  &--error {
    @include alert-level('error');
    display: block;
  }
}

.usa-input.date-picker {
  display: inline-block;
  margin-top: 10px;
  width: 100%;

  .date-picker-component {
    float: left;
    width: 100%;
  }

  legend {
    @include h4;
  }

  label {
    font-weight: 400;
  }

  input[type="number"] {
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button {
      appearance: none;
    }
  }

  input.usa-input-error:focus {
    border-color: $color-red !important;
    box-shadow: none;
  }

  input.usa-input-error {
    padding-left: 11px;
    right: 0;
  }

  .usa-form-group-date-ok {
    padding-top: 30px;
  }

  p.usa-input-error-message {
    display: inline-block;
    line-height: 26px;
    margin-bottom: 0;
    padding-top: 10px;
    visibility: hidden;
    width: 100%;

    &.form-has-errors {
      visibility: inherit;
    }
  }
}

.input__inline-fields  {
  margin: 1rem 0 1rem 0;

  &.input__inline-fields--indented {
    margin-left: 4*$gap;
  }

  &> fieldset.usa-input__choices label {
    display: inline;
    font-weight: $font-normal;
  }
}