atst/styles/components/_forms.scss

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

  &--bordered {
    border-bottom: $color-gray-lighter 1px solid;
  }

  .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,
      textarea {
        max-width: $max-input-width;
      }
    }
  }

  @include media($medium-screen) {
    @include grid-row;

    align-items: flex-start;
    justify-content: flex-start;

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

      &--third {
        flex-basis: 33.33%;
      }

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

      &--sixth {
        flex-basis: 16.66%;
      }

      &--quarter {
        flex-basis: 25%;
      }

      &--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 {
    padding-left: 11px;
    right: 0;

    &:focus {
      border-color: $color-red !important;
      box-shadow: none;
    }
  }

  .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;

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

  & > fieldset.usa-input__choices label {
    display: inline;
  }
}

.form-container {
  margin-bottom: $action-footer-height + $large-spacing;

  &--narrow {
    max-width: $max-input-width;
  }
}