$form-label-min-width: $spacer * 8 !default;
$form-label-width: $spacer * 12 !default;
$form-max-width: 768px;

form {
  // glitchy when switching theme
  // .form-control,
  // .form-select {
  //   transition: unset;
  // }

  // Fix background
  .form-floating>.form-control:focus~label::after,
  .form-floating>.form-control:not(:placeholder-shown)~label::after,
  .form-floating>.form-control-plaintext~label::after,
  .form-floating>.form-select~label::after {
    background-color: unset;
  }

  // Using these classes allow automatic responsive layout
  .form-group {
    margin-bottom: $spacer;

    // No need for form-label
    >label {
      margin-bottom: $spacer * 0.5;
      max-width: 100%;
      text-overflow: ellipsis;
      overflow-x: hidden;
    }

    // It contains other form-group that deal with their own margin bottom
    &.fieldgroup {
      margin-bottom: 0;
    }

    // We need at least lg breakpoint because md has a sidebar
    @include media-breakpoint-up(lg) {
      display: flex;

      &.form-group--no-label {
        margin-left: $form-label-width;
      }

      >label,
      >.form-label {
        padding-top: add($input-padding-y, $input-border-width);
        flex: 0 0 100%;
        max-width: $form-label-width;
        overflow: hidden;
        text-overflow: ellipsis;
        // do not set nowrap to keep long labels readable
        padding-right: 1em;

        &.form-check-label {
          width: 100%;
          max-width: none;
          margin-left: 1em;
          padding-top: 0;
        }
      }

      >.form-check {
        margin-left: $form-label-width;
      }

      >.form-field {
        flex: 0 0 calc(100% - $form-label-width);
        max-width: $form-max-width; // avoid super large inputs

        .form-check:first-child {
          margin-top: $input-padding-y;
        }
      }
    }
  }

  .form-field {
    .readonly {
      background-color: $input-disabled-bg;
      border-color: $input-disabled-border-color;
    }

    p.readonly {
      margin-bottom: 0;
    }

    .restore-form-control {
      background-color: $input-bg;
      border-color: $input-border-color;
    }
  }

  // Helper class to create pseudo rows easily
  .input-group-item {
    margin-right: 1rem;
    margin-bottom: 1rem;
  }

  .accordion {
    max-width: calc($form-label-width + 768px);
    margin-bottom: $spacer;
  }
}