// 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%;
      }

      .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');
  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;
  }
}

