@mixin form-row-base {
  .row {
    margin: 0 ((-$form-spacing) / 2);

    .column,
    .columns {
      padding: 0 ($form-spacing / 2);
    }

    &.collapse {
      margin: 0;

      .column,
      .columns {
        padding: 0;
      }

      input {
        @include side-radius($opposite-direction, 0);
      }
    }
  }

  input.column,
  input.columns,
  textarea.column,
  textarea.columns {
    padding-#{$default-float}: ($form-spacing / 2);
  }
}

@mixin fieldset {
  padding: $fieldset-padding;
  margin: $fieldset-margin;
  border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;

  legend {
    padding: $legend-padding;
    margin: 0;
    font-weight: $legend-font-weight;
    background: $legend-bg;
    margin-#{$default-float}: rem-calc(-3);
  }
}

@mixin form-inline {
  @media (min-width: $screen-sm-min) {
    .form-group {
      display: inline-block;
      width: auto;
      margin-bottom: 0;
      vertical-align: middle;
    }

    .formly-field-inline &.formly-field-input input {
      margin-bottom: 0;
    }

    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      word-wrap: break-word;
      vertical-align: middle;
    }

    .form-control-static {
      display: inline-block;
      word-wrap: break-word;
    }

    .input-container {
      display: inline-table;
      vertical-align: middle;

      .input-container-addon,
      .input-container-btn,
      .form-control {
        width: auto;
      }
    }

    .input-container > .form-control {
      width: 100%;
    }

    .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        padding-left: 0;
      }
    }

    .radio input[type='radio'],
    .checkbox input[type='checkbox'] {
      position: relative;
      margin-left: 0;
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}

.md {
  @include exports('md-form') {
    form.form-inline,
    .form-inline {
      @include form-inline;

      label {
        display: block;
      }

      input {
        margin-left: 0;
      }

      .input-container-btn {
        display: table-cell;
      }

      .input-container {
        .md-button {
          margin-left: 0;
        }
      }
    }

    form,
    .md-form {
      margin: 0 0 $form-spacing;

      .row {
        @include form-row-base;
      }
    }



    // Allow adding grid column classes directly to inputs.
    [class*='column'] {
      & > input[type],
      & > select,
      & > textarea {
        &:not([class*='column']):not([type='submit']):not([type='file']) {
          width: 100%;
        }
      }
    }



    // Add height value for select elements to match text input height
    select {
      @include form-select;

      //height: $input__font-size + $form-spacing * 1.5 - rem-calc(1);
      &[multiple] {
        height: auto;
      }
    }

    // Adjust margin for form elements below

    select {
      margin: 0 0 $form-spacing 0;
    }


    // We add basic fieldset styling
    fieldset {
      @include fieldset;
      @include vr-spacing(p, 0);
    }

    .md-form__section {
      @media #{$medium-up} {
        // required to set sticky element container height
        display: flex;
        align-items: stretch;
      }

      @include grid-row($behavior: nest-collapse);

      border-bottom: $form-section-border-color 1px solid;

      @include vr-spacing(pt, 2);
      @include vr-spacing(pb, 3);
      @include vr-spacing(ph, 2);

      &:last-child {
        border-color: transparent;
      }

      .md-input-container {
        &:last-child {
          margin-bottom: 0;
        }

        & > input[type],
        & > select,
        & > textarea {
          &:not([class*='column']):not([type='submit']):not([type='file']) {
            width: 100%;
          }
        }
      }

      .md-input-row {
        @include grid-row();
        @include form-row-base;
        @include vr-spacing(mb, 1);
      }

      .section__info {
        @media #{$small-only} {
          @include vr-spacing(mb, 2.25);
        }

        .section__title {
          @extend %h4;

          @include vr-spacing(mb, 0.5);
        }

        @media #{$medium-up} {
          @include grid-column(
            $columns: 4,
            $last-column: false,
            $center: false,
            $offset: 0,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$large-up} {
          @include grid-column(
            $columns: 3,
            $last-column: false,
            $center: false,
            $offset: 0,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$xxlarge-up} {
          @include grid-column(
            $columns: 2,
            $last-column: false,
            $center: false,
            $offset: 0,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }
      }

      > .section__info {
        align-self: stretch;

        .sticky {
          @extend %sticky;

          &.sticky--active {
            display: block;
          }
        }
      }

      .section__content {
        .sub-section {
          @include vr-spacing(mb, 2.25);

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

          &__label,
          &__title {
            @extend %h5;

            @include vr-spacing(mb, 0.75);
          }

          &__description {
            @extend .p;

            @include vr-spacing(mb, 1);
          }
        }

        @media #{$medium-up} {
          @include vr-spacing(mt, 0.25);
          @include grid-column(
            $columns: 7,
            $last-column: true,
            $center: false,
            $offset: 1,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$large-up} {
          @include grid-column(
            $columns: 6,
            $last-column: true,
            $center: false,
            $offset: 1,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$xlarge-up} {
          @include grid-column(
            $columns: 5,
            $last-column: true,
            $center: false,
            $offset: 1,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }
      }
    }
    .md-modal .md-modal--small .md-form__section,
    .side-panel-container .md-form__section {
      padding-right: 0;
      padding-left: 0;

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

      .section__info {
        @media #{$medium-up} {
          @include vr-spacing(mt, 0.25);

          width: 100%;
          max-width: 100%;
          margin-left: 0 !important;
        }

        @media #{$large-up} {
          @include vr-spacing(mt, 0.25);

          width: 100%;
          max-width: 100%;
          margin-left: 0 !important;
        }

        @media #{$xxlarge-up} {
          @include vr-spacing(mt, 0.25);

          width: 100%;
          max-width: 100%;
          margin-left: 0 !important;
        }
      }

      .section__content {
        margin-top: 0;

        @media #{$medium-up} {
          width: 100%;
          max-width: 100%;
          margin-top: 0;
          margin-left: 0 !important;
        }

        @media #{$large-up} {
          width: 100%;
          max-width: 100%;
          margin-top: 0;
          margin-left: 0 !important;
        }

        @media #{$xlarge-up} {
          width: 100%;
          max-width: 100%;
          margin-top: 0;
          margin-left: 0 !important;
        }
      }
    }

    .side-panel-container .md-form__section {
      display: block;

      @include vr-spacing(pb, 1.25);

      &:last-child {
        border-color: $form-section-border-color;
      }

      .section__info {
        margin-bottom: 0;

        .section__title {
          @extend %h5;

          @include vr-spacing(mb, 0.75);

          padding: 0 !important;
        }

        .section__description {
          @include vr-spacing(mb, 1);
        }
      }
    }

    .md-modal .md-form__section {
      padding-right: 0;
      padding-left: 0;

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

      .section__info {
        @media #{$medium-up} {
          @include grid-column(
            $columns: 4,
            $last-column: false,
            $center: false,
            $offset: 0,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$large-up} {
          @include grid-column(
            $columns: 4,
            $last-column: false,
            $center: false,
            $offset: 0,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$xxlarge-up} {
          @include grid-column(
            $columns: 4,
            $last-column: false,
            $center: false,
            $offset: 0,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }
      }

      .section__content {
        @media #{$medium-up} {
          @include vr-spacing(mt, 0.25);
          @include grid-column(
            $columns: 6,
            $last-column: true,
            $center: false,
            $offset: 1,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$large-up} {
          @include vr-spacing(mt, 0.25);
          @include grid-column(
            $columns: 6,
            $last-column: true,
            $center: false,
            $offset: 1,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }

        @media #{$xlarge-up} {
          @include vr-spacing(mt, 0.25);
          @include grid-column(
            $columns: 6,
            $last-column: true,
            $center: false,
            $offset: 1,
            $push: 0,
            $pull: 0,
            $collapse: true,
            $float: left
          );
        }
      }
    }

    .md-form .side-panel-section {
      border-color: transparent;
    }
  }
}