$suit-form-padding-vertical: .5rem;
$suit-form-padding-horizontal: 1.1rem;
$suit-label-padding-top: $suit-form-padding-vertical + .55rem;
$suit-label-padding-bottom: $suit-form-padding-vertical + .4rem;
$suit-padding-first-extra: .25rem;

textarea.form-control {
  line-height: $textarea-line-height;
}

fieldset {
  @include suit-box-shadow();
  margin-bottom: 2rem;
}

// Django plain/original markup
// -----------------------------------------
fieldset {
  > h2 {
    float: left;
    padding-right: 2rem;
  }
  > .description {
    font-size: $font-size-sm;
    padding-top: .35rem;
    display: inline-block;
    @extend .text-muted;
  }
  // Clear float
  h2 + .description + *, .inline-related {
    clear: both;
  }
  .form-row:not(.form-group):not(tr) {
    display: flex;
    background-color: $form-bg;
    &:last-child {
      > label:not(.form-control-label) {
        border-bottom: 0;
      }
    }
    // Since content after label is not wrapped in container
    // we must fake padding for input
    padding: $suit-form-padding-vertical $suit-form-padding-horizontal;
    @include media-breakpoint-down(xs) {
      flex-wrap: wrap;
    }
    > * {
      align-self: flex-start;
    }
    > label:not(.form-control-label) {
      @extend .col-sm-2;
      align-self: stretch;
      margin: (-$suit-form-padding-vertical) $suit-form-padding-horizontal (-$suit-form-padding-vertical) (-$suit-form-padding-horizontal);
      &.required {
        padding-right: 1.5rem;
      }
      @include media-breakpoint-down(sm) {
        // Use as .col-sm-3
        flex: 0 0 25%;
      }
      @include media-breakpoint-down(xs) {
        flex: 0 0 100%;
      }
    }
  }
}

// Remove bottom border from suit-include fieldsets
.suit-include {
  fieldset:not(.suit-form):not(.module) {
    box-shadow: none;
  }
  .card:last-child {
    margin-bottom: 0;
  }
}

// Django "plain" and BS4 markup
// -----------------------------------------
fieldset {
  .text-help {
    @extend .text-muted;
    margin-top: .5rem;
    display: block;
  }
  // Help text right after checkbox only (User permissions for example)
  input[type="checkbox"] + .text-help,
  .form-inline .text-help {
    display: inline;
    margin-left: .5rem;
  }
  .form-inline {
    .text-help {
      display: inline-block;
      margin-left: .5rem;
    }
  }
}

fieldset {
  .form-row, .suit-form .form-group {
    clear: both;
    label {
      font-size: $font-size-sm;
      &.required {
        &:after {
          content: '*';
          margin: 0 0 0 5px;
          position: absolute;
          color: #ccc;
        }
      }
    }
    > label {
      margin: 0;
      line-height: 1.25rem;
      text-align: right;
      background-color: $form-label-bg;
      padding-top: $suit-label-padding-top;
      padding-bottom: $suit-label-padding-bottom;
      border-bottom: 1px solid $form-border-color;
      @include media-breakpoint-down(xs) {
        padding-top: $suit-label-padding-top/2;
        background-color: transparent;
        text-align: left;
        font-weight: bold;
        border-bottom: none;
      }
    }
    &.has-danger {
      display: flex !important;
    }
    &:last-child {
      > label {
        border-bottom: none;
      }
    }
    > ul, .errorlist {
      margin: 0;
      padding-left: 2rem;
      font-size: $font-size-xs;
      @include media-breakpoint-down(xs) {
        margin-top: .5rem;
        padding-left: 1.5rem;
      }
    }
  }
}

// BS4 markup in .suit-form
// -----------------------------------------
.suit-form {
  .form-group {
    margin: 0;
    background-color: $form-bg;
    @include media-breakpoint-down(xs) {
      padding-bottom: 1rem;
    }
    label {
      margin: 0;
      &.required {
        padding-right: .55rem;
      }
    }
    .form-control-label + div[class*='col-'] {
      padding-top: $suit-form-padding-vertical;
      padding-bottom: $suit-form-padding-vertical;
      @include media-breakpoint-down(xs) {
        padding-top: 0;
      }
    }
    p.form-control-static {
      margin: 0;
    }
    // More spacing for first and last rows
    &:first-child {
      .form-control-label {
        padding-top: $suit-label-padding-top + $suit-padding-first-extra;
      }
      .form-control-label + div[class*='col-'] {
        padding-top: $suit-form-padding-vertical + $suit-padding-first-extra;
      }
    }
    &:last-child {
      .form-control-label + div[class*='col-'] {
        padding-bottom: $suit-form-padding-vertical + $suit-padding-first-extra;
      }
    }
  }
}

// Multiple in single line fields
// -----------------------------------------
.col-multi-fields {
  padding-bottom: 0 !important;
  display: flex;
  flex-wrap: wrap;
  @include media-breakpoint-down(xs) {
    padding-top: 0 !important;
  }
  .multi-field {
    flex-basis: 15rem;
    white-space: nowrap;
    margin-bottom: $suit-form-padding-vertical;
    padding-right: 1rem;
    @include media-breakpoint-down(xs) {
      flex-basis: 100%;
      padding-bottom: 0;
    }
    .form-control-label {
      vertical-align: top;
      display: inline-block;
      padding-top: $suit-form-padding-vertical !important;
      padding-left: 0;
      padding-right: $suit-form-padding-horizontal / 2;
      @include media-breakpoint-up(sm) {
        padding-bottom: 0;
      }
      @include media-breakpoint-down(xs) {
        font-weight: bold;
      }
    }
    .multi-field-content {
      display: inline-block;
      @include media-breakpoint-up(sm) {
        padding-top: 0 !important;
        input, select {
          width: auto;
        }
      }
    }
    @include media-breakpoint-down(xs) {
      .form-control-label, .multi-field-content {
        display: block;
      }
    }
  }
}

.hidden {
  display: none;
}

/* COLLAPSED FIELDSETS */
fieldset {
  &.collapsed {
    background-color: $form-bg;
    margin-top: -1rem;
    overflow: hidden;
    > * {
      display: none;
    }
    h2 {
      display: block;
      font-size: $font-size-h5;
      font-weight: normal;
      margin: 0;
      padding: .5rem 1rem;
    }
  }
  &.collapse {
    display: block;
  }
}

/* IN-LINES */
.empty-form {
  display: none !important;
}

.tabular {
  table {
    @extend .table;
    @extend #result_list;
  }
}

.inline-group {
  // Tabular inlines
  .tabular {
    table {
      thead {
        > tr th {
          // Override padding by previous @extend #result_list;
          padding: $table-th-padding;
        }
      }
      th, td {
        font-size: $font-size-base;
      }
      tbody {
        td {
          &.original {
            p {
              margin: 0;
              @extend .form-control-static;
              a {
                float: right;
                font-size: $font-size-xs;
              }
            }
          }
          .errorlist {
            margin: 0;
            padding-left: 1.5rem;
            font-size: $font-size-xs;
            color: $brand-danger;
          }
          .errorlist + input {
            border-color: $brand-danger;
          }
        }
      }

      // Hide "original"/name column
      .suit-inlines-hide-original:not(.suit-inlines-show-original) & {
        tbody, thead {
          > tr {
            td, th {
              &.original {
                font-size: 0;
                width: 0;
                padding: 0;
                border-color: transparent;
                box-shadow: none;
                > * {
                  display: none;
                }
              }
            }
            th.original:empty + th {
              box-shadow: none;
            }
          }
        }
      }
    }
    fieldset {
      box-shadow: none;
    }
  }
  // Stacked
  .inline-related {
    h3 {
      margin: 0;
      color: #fff;
      font-size: $font-size-base;
      padding: $table-th-padding;
      font-weight: normal;
      background-color: $inverse-lightest;
      b {
        display: inline-block;
        min-width: 17.5%;
      }
      a {
        color: #fff;
        text-decoration: underline;
        &.inline-deletelink {
          float: right;
        }
      }
      label {
        margin: 0;
      }
      span.delete, span:not(.inline_label):not(:first-child) {
        float: right;
      }
      .stacked-inline-sortable {
        float: right;
        margin-left: 1.5rem;
      }
    }
    fieldset.suit-form {
      margin-bottom: 1rem;
    }
  }
  .inline-related + .empty-form + .add-row {
    margin-top: -1rem;
  }
  div.add-row {
    border-top: 2px solid $body-bg;
    margin-bottom: 2rem;
    padding: $table-cell-padding;
    background-color: $form-bg;
  }
}

.custom-select-sm {
  $select-border-width: ($border-width * 2);
  height: calc(#{$input-height} - #{$select-border-width} - 5px);
}
