@import 'settings';

// Horizontal forms
//
// Horizontal forms are built on flexbox and allow you to create forms with
// labels on the left and inputs on the right.

.form-horizontal {

  .form-fieldset {
    margin-bottom: 2rem;
  }


  // Make form groups behave like rows.
  @include for-tablet-portrait-up {
    .form-group {
      display: flex;
      // wrap for help texts
      flex-wrap: wrap;
      // prevent form-control to stretch when label line wraps.
      align-items: flex-start;
    }

    .help-block {
      flex-basis: 100%;
    }

    .control-label {
      margin-bottom: 0;
      // Size it to the form-control
      padding-top: ($padding-base-vertical + 1);
      line-height: $line-height-base;
      flex: 1 1 auto;
      padding-right: 1em;

      + .form-control,
      + .select-wrapper {
        flex: 0 1 auto;
        width: auto;
      }

    }

    // Label takes up to 70% of the column width.
    .control-label--wide {
      flex: 3 1 70%;

      + .form-control,
      + .select-wrapper {
        flex: 1 1 30%;
      }
    }

  }

  @include for-desktop-up {
    .control-label--wide {
      flex-basis: 80%;

      + .form-control,
      + .select-wrapper {
        flex-basis: 20%;
      }

    }
  }

}
