//  Form Layouts
//================================================== //

.page-container,
.container {
  .form-responsive {
    input:not([type="radio"]),
    textarea {
      max-width: 100% !important;
      width: 100%;
    }

    .compound-field .field-checkbox {
      margin-top: 0;
    }

    .field-checkbox {
      margin-top: 30px;

      .icon-dirty.dirty-checkbox.is-checked {
        @media (max-width: $breakpoint-phone-to-tablet) {
          top: -1px;
        }
      }
    }

    .colorpicker-container {
      position: relative;
      width: 100%;

      .colorpicker {
        width: auto;
      }

      .trigger {
        position: absolute;
        right: 0;
      }
    }

    .dropdown-wrapper {
      width: 100%;

      div.dropdown,
      div.multiselect {
        width: inherit;
      }
    }

    .field .checkbox-label,
    .field .checkbox > label {
      margin-top: 0;
      white-space: unset;
    }

    .checkbox-group-label + .compound-field {
      .field .checkbox-label,
      .field .checkbox > label {
        margin-top: 0;
      }

      .field.field-checkbox {
        margin-bottom: 0;
      }
    }

    .field-checkbox {
      text-align: left;
    }

    .lookup-wrapper {
      width: 100%;
    }

   .label,
   label:not(.fileupload-adv-browse-lbl):not(.checkbox-label):not(.radio-label) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .row.flex-align-bottom,
    &.row.flex-align-bottom {
      .label,
      label:not(.checkbox-label) {
        overflow: visible;
        white-space: normal;
      }
    }

    .row.no-bottom-margin {
      margin-bottom: 0;
    }

    .spinbox-wrapper {
      width: 100%;

      input {
        width: calc(100% - 66px);
      }
    }
  }

  .flex-wrap-form {
    display: flex;
    flex-wrap: wrap;

    .field .columns {
      &.one,
      &.two,
      &.three,
      &.four,
      &.five,
      &.six,
      &.seven,
      &.eight,
      &.nine,
      &.ten,
      &.eleven,
      &.twelve {
        @media (min-width: $breakpoint-phone-to-tablet) {
          margin-left: 0;
        }
      }
    }
  }

  .flex-columns {
    display: inline-block;

    @media (min-width: $breakpoint-phone-to-tablet) {
      display: flex;
      justify-content: space-between;
    }

    .columns {
      @media (max-width: $breakpoint-phone-to-tablet) {
        padding: 0;
      }
    }
  }
}

@media (max-width: ($breakpoint-phone-to-tablet + 1)) {
  .page-container,
  .container {
    .form-responsive {
      .field .checkbox-label,
      .field .checkbox > label {
        margin-bottom: 13px;
        margin-top: -1px;
      }
    }
  }

  .form-responsive .checkbox-group-label + .compound-field .field .checkbox-label {
    margin-bottom: 0;
  }
}

.form-responsive {
  .fileupload-wrapper.standalone {
    padding: 25px 0;
  }

  .fileupload-wrapper {
    min-width: unset;

    .container {
      .file-row {
        .status-icon {
          .icon {
            top: 0;
          }
        }
      }
    }
  }

  @media (min-width: $breakpoint-phone-to-tablet) and (max-width: $breakpoint-wide-tablet) {
    .column {
      &.one-fourth,
      &.one-fifth {
        .fileupload-wrapper {
          .container.drop-area {
            padding: 20px 15px;
          }

          .container {
            .file-row {
              .description {
                max-width: calc(100% - 45px);
              }

              .size {
                margin: 0;
                width: calc(100% - 10px);
              }
            }

            .l-pull-right {
              float: unset;
              text-align: center;
            }

            &.completed {
              .file-row {
                .size {
                  width: inherit;
                }
              }
            }
          }
        }
      }
    }
  }
}

// Setup specific widths for modals/CAPs with a responsive form
.modal {
  &.display-fullsize {
    .form-responsive {
      input,
      textarea {
        max-width: none;
        width: 100%;
      }

      input.spinbox {
        width: calc(100% - 67px);
      }

      .colorpicker-container {
        width: 100%;

        .colorpicker {
          width: auto;
        }
      }

      .dropdown-wrapper {
        width: 100%;

        div.dropdown,
        div.multiselect {
          width: inherit;
        }
      }
    }
  }
}

html {
  // Field with Label Left in fr Locale
  &[lang^='fr'] {
    .field.label-left {
      .label::after {
        padding-left: 8px;
      }
    }
  }

  &:not([lang^='fr']) {
    .field.label-left {
      .label::after {
        padding-left: 0;
      }
    }
  }
}

// Hide and show password functionality
.input-hideshow-text {
  color: $ids-color-palette-slate-50;

  .reveal-icon {
    color: $ids-color-palette-slate-50;
  }

  cursor: pointer;
  position: absolute;
  text-transform: uppercase;
  transform: translate(calc(-100% + -8px), 11px);
}

.input-hide-text {
  -webkit-text-security: disc;

  &::-ms-reveal,
  &::-ms-clear {
    display: none !important;
  }
}

html[dir='rtl'] {
  .form-responsive {
    .colorpicker-container {
      .trigger {
        left: 0;
        right: auto;
      }
    }
  }

  .input-hideshow-text {
    transform: translate(calc(100% + 8px), 7px);
  }
}