_patterns_forms.scss

@import 'settings';

@mixin vf-p-forms {
  @include vf-p-forms-stacked;
  @include vf-p-forms-inline;

  form + [class*='p-button'] {
    margin-top: $spv-outer--scaleable;
  }
}

@mixin vf-p-forms-stacked {
  .p-form--stacked {
    width: 100%;

    .p-form__group {
      @media screen and (min-width: $breakpoint-medium) {
        align-items: baseline;

        + .p-form__group {
          margin-top: $spv-inner--small;
        }
      }
    }
  }
}

@mixin vf-p-forms-inline {
  .p-form--inline {
    @media screen and (min-width: $breakpoint-medium) {
      align-items: baseline;
      display: inline-flex;
      flex-direction: row;

      > * {
        margin: 0;
      }
    }

    .p-form__group {
      @media screen and (min-width: $breakpoint-medium) {
        display: flex;
        width: auto;

        + .p-form__group,
        + [class*='p-button'] {
          margin-left: $sph-inner--large;
        }

        .p-form__label,
        .p-form__control,
        .p-form-validation__message {
          align-self: baseline;
          box-sizing: border-box;
        }

        .p-form__label {
          flex-shrink: 0;
          padding-right: $sph-inner;
        }

        .p-form__control {
          display: inline-block;
        }
      }
    }
  }
}