/* FORM ROWS */

.form-row {
  overflow: hidden;
  padding: 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--hairline-color);

  img,
  input {
    vertical-align: middle;
  }

  label input[type="checkbox"] {
    margin-top: 0;
    vertical-align: 0;
  }
}

form .form-row p {
  padding-left: 0;
}

/* FORM LABELS */

label {
  font-weight: normal;
  color: var(--body-quiet-color);
  font-size: 13px;
}

.required label,
label.required {
  font-weight: bold;
  color: var(--body-fg);
}

/* RADIO BUTTONS */

form ul {
  &.radiolist {
    li {
      list-style-type: none;
    }

    label {
      float: none;
      display: inline;
    }

    input[type="radio"] {
      margin: -2px 4px 0 0;
      padding: 0;
    }
  }

  &.inline {
    margin-left: 0;
    padding: 0;

    li {
      float: left;
      padding-right: 7px;
    }
  }
}

/* ALIGNED FIELDSETS */

.aligned {
  label {
    display: block;
    padding: 4px 10px 0 0;
    float: left;
    width: 160px;
    word-wrap: break-word;
    line-height: 1;

    &:not(.vCheckboxLabel):after {
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 26px;
    }

    + {
      p {
        padding: 6px 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 170px;
      }

      div {
        &.help,
        &.readonly {
          padding: 6px 0;
          margin-top: 0;
          margin-bottom: 0;
          margin-left: 170px;
        }
      }
    }
  }

  ul label {
    display: inline;
    float: none;
    width: auto;
  }

  .form-row input {
    margin-bottom: 0;
  }
}

.colMS .aligned {
  .vLargeTextField,
  .vXMLLargeTextField {
    width: 350px;
  }
}

form .aligned {
  ul {
    margin-left: 160px;
    padding-left: 10px;

    &.radiolist {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
  }

  p.help,
  div.help {
    clear: left;
    margin-top: 0;
    margin-left: 160px;
    padding-left: 10px;
  }

  label + {
    p.help,
    div.help {
      margin-left: 0;
      padding-left: 0;
    }
  }

  p.help:last-child,
  div.help:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  input + p.help,
  textarea + p.help,
  select + p.help,
  input + div.help,
  textarea + div.help,
  select + div.help {
    margin-left: 160px;
    padding-left: 10px;
  }

  ul li {
    list-style: none;
  }

  table p {
    margin-left: 0;
    padding-left: 0;
  }
}

.aligned .vCheckboxLabel {
  float: none;
  width: auto;
  display: inline-block;
  vertical-align: -3px;
  padding: 0 0 5px 5px;

  + {
    p.help,
    div.help {
      margin-top: -4px;
    }
  }
}

.colM .aligned {
  .vLargeTextField,
  .vXMLLargeTextField {
    width: 610px;
  }
}

.checkbox-row {
  p.help,
  div.help {
    margin-left: 0;
    padding-left: 0;
  }
}

fieldset .fieldBox {
  float: left;
  margin-right: 20px;
}

/* WIDE FIELDSETS */

.wide label {
  width: 200px;
}

form {
  .wide {
    p {
      margin-left: 200px;
    }

    input + {
      p.help,
      div.help {
        margin-left: 200px;
      }
    }

    p.help,
    div.help {
      padding-left: 38px;
    }
  }

  div.help ul {
    padding-left: 0;
    margin-left: 0;
  }
}

.colM fieldset.wide {
  .vLargeTextField,
  .vXMLLargeTextField {
    width: 450px;
  }
}

/* COLLAPSED FIELDSETS */

fieldset {
  &.collapsed {
    * {
      display: none;
    }

    h2 {
      display: block;
      background: var(--darkened-bg);
      color: var(--body-quiet-color);
    }

    display: block;
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    overflow: hidden;
  }

  .collapse-toggle {
    color: var(--header-link-color);
  }

  &.collapsed .collapse-toggle {
    background: transparent;
    display: inline;
  }

  &.monospace textarea {
    font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier,
      monospace;
  }
}

/* MONOSPACE TEXTAREAS */

/* SUBMIT ROW */

.submit-row {
  padding: 12px 14px;
  margin: 0;
  @extend .bg-light;
  border: 1px solid $border-color;
  border-radius: 4px;
  text-align: right;
  overflow: hidden;
}

body.popup .submit-row {
  overflow: auto;
}

.submit-row {
  input {
    height: 35px;
    line-height: 15px;
    margin: 0 0 0 5px;

    &.default {
      margin: 0 0 0 8px;
      text-transform: uppercase;
    }
  }

  p {
    margin: 0.3em;

    &.deletelink-box {
      float: left;
      margin: 0;
    }
  }

  a {
    &.deletelink {
      display: block;
      background: var(--delete-button-bg);
      border-radius: 4px;
      padding: 10px 15px;
      line-height: 15px;
      color: var(--button-fg);
    }

    &.closelink {
      display: inline-block;
      background: var(--close-button-bg);
      border-radius: 4px;
      padding: 10px 15px;
      line-height: 15px;
      margin: 0 0 0 5px;
      color: var(--button-fg);
    }

    &.deletelink {
      &:focus,
      &:hover,
      &:active {
        background: var(--delete-button-hover-bg);
      }
    }

    &.closelink {
      &:focus,
      &:hover,
      &:active {
        background: var(--close-button-hover-bg);
      }
    }
  }
}

/* CUSTOM FORM FIELDS */

.vSelectMultipleField {
  vertical-align: top;
}

.vCheckboxField {
  border: none;
}

.vDateField,
.vTimeField {
  margin-right: 2px;
  margin-bottom: 4px;
}

.vDateField {
  min-width: 6.85em;
}

.vTimeField {
  min-width: 4.7em;
}

.vURLField {
  width: 30em;
}

.vLargeTextField,
.vXMLLargeTextField {
  width: 48em;
}

.flatpages-flatpage #id_content {
  height: 40.2em;
}

.module table .vPositiveSmallIntegerField {
  width: 2.2em;
}

.vTextField,
.vUUIDField {
  width: 20em;
}

.vIntegerField {
  width: 5em;
}

.vBigIntegerField {
  width: 10em;
}

.vForeignKeyRawIdAdminField {
  width: 5em;
}

/* INLINES */

.inline-group {
  padding: 0;
  margin: 0 0 30px;

  thead th {
    padding: 8px 10px;
  }

  .aligned label {
    width: 160px;
  }
}

.inline-related {
  position: relative;

  h3 {
    margin: 0;
    color: var(--body-quiet-color);
    padding: 5px;
    font-size: 13px;
    background: var(--darkened-bg);
    border-top: 1px solid var(--hairline-color);
    border-bottom: 1px solid var(--hairline-color);

    span.delete {
      float: right;

      label {
        margin-left: 2px;
        font-size: 11px;
      }
    }
  }

  fieldset {
    margin: 0;
    border: none;
    width: 100%;

    &.module h3 {
      margin: 0;
      padding: 2px 5px 3px 5px;
      font-size: 11px;
      text-align: left;
      font-weight: bold;
      background: #bcd;
      color: var(--body-bg);
    }
  }
}

.inline-group .tabular fieldset.module {
  border: none;
}

.inline-related.tabular fieldset.module table {
  width: 100%;
  overflow-x: scroll;
}

.last-related fieldset {
  border: none;
}

.inline-group {
  .tabular {
    tr {
      &.has_original td {
        padding-top: 2em;
      }

      td.original {
        padding: 2px 0 0 0;
        width: 0;
        _position: relative;
      }
    }

    th.original {
      width: 0px;
      padding: 0;
    }

    td.original p {
      position: absolute;
      left: 0;
      margin-top: -1.7rem;
      padding: 2px 9px;
      overflow: hidden;
      font-size: 9px;
      font-weight: bold;
      color: $body-color;
      _width: 700px;
    }
  }

  ul.tools {
    padding: 0;
    margin: 0;
    list-style: none;

    li {
      display: inline;
      padding: 0 5px;
    }
  }

  div.add-row {
    color: var(--body-quiet-color);
    background: var(--darkened-bg);
    padding: 8px 10px;
    border-bottom: 1px solid var(--hairline-color);
  }

  .tabular tr.add-row td {
    color: var(--body-quiet-color);
    background: var(--darkened-bg);
    padding: 8px 10px;
    border-bottom: 1px solid var(--hairline-color);
    padding: 8px 10px;
    border-bottom: 1px solid var(--hairline-color);
  }

  ul.tools a.add,
  div.add-row a,
  .tabular tr.add-row td a {
    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
    padding-left: 16px;
    font-size: 12px;
  }
}

.empty-form {
  display: none;
}

/* RELATED FIELD ADD ONE / LOOKUP */

.related-lookup {
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 14px;
  width: 16px;
  height: 16px;
  background-image: url(../img/search.svg);
}

form .related-widget-wrapper ul {
  display: inline-block;
  margin-left: 0;
  padding-left: 0;
}

.clearable-file-input input {
  margin-top: 0;
}
