.form-well {
  .form-wrap {
    padding: (2 * $vertical-height) 0 (4 * $vertical-height);
  }

  .form-well-input-static {
    @include make-col-ready;

    @extend .form-control-static;

    font-weight: $strong-font-weight;
    // to match the height of inputs
    line-height: 1.5;

    // So text lines up with the text of inputs
    padding-left: 1.6875rem;

    // static padding: 0.9375 + input padding: 0.75
    padding-right: 1.6875rem;
  }

  // This is the same as form-well-input-full-width - but it makes text bold
  .form-well-input-static-full-width {
    @extend .form-well-input-static;
    @extend .form-well-input-full-width;
  }

  .right-input-help {
    line-height: 1.25;
    margin-top: 0.6em;
  }
  .right-input-help.right-text-help {
    font-style: italic;

    a {
      color: $body-font-color;
      cursor: pointer;

      &:hover,
      &:active,
      &.active {
        color: $link-color;
      }
    }

    &.full-width {
      max-width: 100%;
      margin-top: -0.6rem;
    }
  }

  .full-width-checkbox-help {
    @extend .below-input-help;

    margin: -1em 0 0 17px;
  }

  .selectize-control {
    line-height: 0;
  }

  // label isn't lined up
  .inline-input-help {
    @extend .form-circle-item;

    display: block;
    border: 2px solid $gray;
    position: absolute;
    right: 1.5em;
    top: 0.3em;
    font-weight: $strong-font-weight;
    z-index: 100;
    transition: all 0.05s linear;

    &:hover,
    &:active,
    &.active {
      text-decoration: none;
      border-color: $link-color;
      color: $link-color;
    }
  }

  .fancy-select .inline-input-help {
    right: 2.75em;
  }

  // To not cover up select pointer
  .form-well-label {
    @extend .form-control-label;
    code {
      color: $body-font-color; // Used in registration_field_label
      background: none;
    }

    line-height: 1.2em;
    padding-top: 0.65rem;
  }

  .form-well-label,
  .form-well-input,
  .form-well-input-large,
  .form-well-input-full-width,
  .right-input-help {
    @include make-col-ready;
  }

  // line checkboxes and radio inputs up with text fields
  // *Matched by the padding on the new bike electric checks*
  .form-well-input-checks {
    padding-left: 19px;
    line-height: 1.5;
  }

  .related-fields {
    .form-group {
      padding-top: 0.5 * $vertical-height;
      margin-bottom: 0;

      &:first-of-type {
        padding-top: 0;
      }
    }

    padding-bottom: 1.5 * $vertical-height;
  }

  .full-width-section {
    // pad the sides so that it fits the row.
    padding-left: $row-side-padding;
    padding-right: $row-side-padding;
  }

  .form-group {
    clear: both;

    label.checkbox-inline, label.radio-inline {
      cursor: pointer;
    }
    .checkbox-inline {
      padding-top: 0.5em;
    }

    .form-well-input .checkbox-inline {
      padding-top: 0;
    }

    .radio-inline,
    .checkbox-inline {
      input[type='radio'],
      input[type='checkbox'] {
        margin-top: 0.6em;
      }
    }
  }

  .row.collapse.in {
    display: flex;
  }

  .full-width-button {
    padding: (2 * $vertical-height) $grid-gutter-width;

    .btn {
      display: block;
      margin: 0 auto;
      max-width: 100%;
    }
  }

  .extra-footer-save {
    padding-top: 60px;
    .btn {
      display: block;
      margin: 0 auto 0;
    }
  }

  hr {
    clear: both;
    margin-top: 3 * $vertical-height;
  }
}

//
// XS screens
@media (max-width: $grid-breakpoint-sm - 1px) {
  .form-well {
    .form-well-input,
    .form-well-input-static {
      @include make-col(8);
    }

    .form-well-label {
      @include make-col(4);
    }

    .form-well-input-large,
    .form-well-label-large-input {
      @include make-col(12);
    }

    .form-well-label-large-input {
      padding-top: 0;
    }

    .right-input-help {
      @include make-col-offset(4);

      @include make-col(8);

      margin-top: 0.25em;

      label {
        padding-top: 0.5em;
      }

      // To pad checkboxes a bit
      text-align: right;
    }

    .unnested-field::after,
    .related-fields::after {
      content: '';
      display: block;
      margin: 0 15px (2 * $vertical-height) 10%;
      border-bottom: 1px $form-well-divider-color solid;
      padding-top: $vertical-height;
      padding-bottom: $vertical-height;
    }

    // .related-fields::after aren't the same width as unnessted-fields because they aren't rows
    // This is a fairly good approximation of their differences is widths - a few px off tho
    .related-fields::after {
      width: 90%;
    }

    .unnested-field::after {
      width: 87.5%;
      margin-left: 12.5%;
    }

    .no-divider-row::after {
      display: none;
    }

    hr {
      margin-top: 5 * $vertical-height;
    }

    // It isn't cleared correctly on small screens
  }
}

//
// Small screens and larger
@media (min-width: $grid-breakpoint-sm) {
  .form-well {
    .form-well-input,
    .form-well-input-static {
      @include make-col(6);
    }

    .form-well-input-large,
    .form-well-input-full-width {
      @include make-col(8);
    }

    // So text lines up with the text of inputs
    .form-well-input-static-full-width {
      padding-left: 1.6875rem;
    }

    .form-well-label {
      @include make-col(3);
    }

    .right-input-help {
      @include make-col(3);

      &.full-width {
        text-align: right;
        flex: 0 0 100%;
      }
    }
  }
}

@media (max-width: $grid-breakpoint-md - 1px) {
  .form-well-container.container {
    max-width: 100%;
    background: $form-well-background;

    .form-well {
      width: 100%;
    }
    .extra-footer-save {
      display: none;
    }
  }
  // This is the selector we put everything under, don't overpower by including in
  // .form-well-container.container above - that's for a special case
  // .form-well { }
}

@media (min-width: $grid-breakpoint-md) and (max-width: $grid-breakpoint-lg - 1px) {
  .form-well {
    background: $form-well-background;
    border: 1px solid $form-well-border-color;

    // label is 3 columns.
  }
}

@media (min-width: $grid-breakpoint-md) {
  .form-well .full-width-section {
    padding-left: 2 * $row-side-padding;
    padding-right: 2 * $row-side-padding;
  }

  // because we have to use floats instead of flex with sticky (affixing edit menu)
  .form-well-container.container > .row {
    display: block;

    @include clearfix;

    .col-md-8.form-well {
      display: block;
      float: right;
      width: 66.66667%;
    }
  }

  // To properly space the sides of the containers
  .form-wrap .row {
    margin-left: 0;
    margin-right: 0;
  }
}

//
// Everything but large screens
@media (max-width: $grid-breakpoint-lg - 1px) {
  // Cover up the margin beneath
  .form-well-container.container {
    margin-bottom: -$primary-footer-top-margin;
  }

  // Remove some padding between the forms
  .form-well {
    .extra-footer-save {
      padding: 0 0 2*$vertical-height;
      margin-top: -20px;
    }

    .form-wrap.secondary-form-wrap {
      padding-top: 0;
      margin-top: -2 * $vertical-height;
    }
  }
}

//
// Large screen styles
@media (min-width: $grid-breakpoint-lg) {
  .form-well {
    border: none;
    background: none;
  }

  .form-well {
    .form-wrap {
      background: $form-well-background;
      border: 1px solid $form-well-border-color;
      padding-top: 4 * $vertical-height;
      width: 100%;
      position: relative;

      .form-control-label {
        text-align: right;
      }

      // Add some space between the forms
      &.secondary-form-wrap {
        margin-top: 3 * $vertical-height;
      }
    }

    // label is 3 columns

    .form-well-input-static {
      @include make-col(6);
    }

    .form-well-input-full-width {
      @include make-col(9);
    }
  }
}
