/**
* Form Base Component
*/
// form components:
@import 'forms/checkbox-radio';
@import 'forms/append-button';
@import 'forms/label-errors';
@import 'forms/legend-toggle';
@import 'forms/range-control';
@import 'forms/select-control';
@import 'forms/form-actions';

form {
  position: relative;
}

// control-group that contains controls and label
.control-group {
  display: flex;
  flex-direction: column;

  p {
    margin: $formParagraphMargin 0 0 0;
    font-size: $copyTextFormsFontSize;
    line-height: $copyTextFormsLineHeight;

    & + p {
      margin-top: $copyTextFormsMultipleMarginTop;
    }
  }

  .controls {
    margin-bottom: $controlMargin;
    position: relative;
    p {
      font-size: $copyTextFormsFontSize;
      color: $grayColor;
      a {
        @include link-color();
      }
    }
  }

  &.tight, &:last-of-type {
    .controls {
      margin-bottom: 0;
    }
  }
}

legend {
  font-size: $legendFontSize;
  font-weight: $legendFontWeight;
  color: $legendColor;
  margin-bottom: $legendMargin;
}

.multi-form label:not(.checkbox),
.control-group > label, .control-group > .label {
  &:not(.checkbox) {
    font-weight:$labelFontWeight;
    font-size: $labelFontSize;
    color: $labelColor;
    margin-bottom: $labelMargin;
    display: block;
  }
}

fieldset {
  border: none;
  padding: 0 0 $formMargin 0;
  border-bottom: $globalBorder;
  margin-bottom: $formMargin;
  margin-left: 0;
  margin-right: 0;
  &:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

form.loading {
  [type="submit"] {
    @include loadingContainer();
  }
}

// Basic form and input types
@include inputs() {
  @include input-style();
  font-size: $inputFontSize;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // disable default browser style
  -webkit-appearance: none;
  appearance: none;
  -o-appearance: none;
  -moz-appearance: none;
  padding: $inputPadding;
  color: $baseColor;
  display: block;
  width: 100%;
  max-width: 100%;
  will-change: background-color, box-shadow;
  text-overflow: ellipsis;
  height: $inputHeight;
  transition: $inputTransitions;

  &:focus {
    @include focus-input-style();
  }

  &.uneditable-input {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    height: auto;
    padding: $uneditableInputPadding;
    min-height: $inputHeight;
  }

  &.uneditable-input,
  &[disabled],
  &.disabled {
    background: $inputDisabledBg;
    color: $inputDisabledColor;
    cursor: not-allowed;
    border-color: $inputDisabledBorder;
    &:not(.copyable) {
      @include interface();
    }

  }

  &.copyable {
    cursor: copy;
  }

  /**
  * Placeholder
  */
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: $placeholderColor;
    font-style: normal;
    font-weight: normal;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $placeholderColor;
    font-style: normal;
    opacity: 1;
    font-weight: normal;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $placeholderColor;
    font-style: normal;
    opacity: 1;
    font-weight: normal;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: $placeholderColor;
    font-style: normal;
    font-weight: normal;
  }

  // validation states

  &.invalid {
    background: $inputBackgroundInvalid;
    // Firefox will render a boxshadow
    box-shadow: $inputBoxShadow;
    border: $inputBorderInvalid;
    &.loading {
      @include loadingContainer($alertColor);
    }
  }

  // remove default validation states
  &:invalid {
    box-shadow: $inputBoxShadow;
    border: $inputBorder;
  }

  &.loading {
    transition: background 0s ease;
    position: relative;
    @include loadingContainer(#ccc);
  }
}

/* Error Container */
.form-error {
  color: $alertColor;
  font-size: $smallFontSize;
}

textarea {
  min-height: 12rem;
  padding: $textareaPadding;
}

/* A third row for appended items*/
form .append {
  margin: $appendMarginTopPositive 0 0 0;
  width: 100%;
  .checkbox {
    color: $grayColor;
    font-size: $copyTextFormsFontSize;
  }

  p:first-of-type {
    margin-top: 0;
  }
}

form:not(.wide) {
  .append {
    align-self: flex-end;
  }
}

.list-form {
  width: 100%;
}

.append-form {
  display: flex;
  align-items: center;
  > :first-child {
    flex: 1;
  }
}

// Multiple elements in one row

.multi-form {
  display: flex;
  &.center {
    @extend .flex-align-items-center !optional;
  }
  > * {
    margin-left: $inputMultiFormSpacing;
    min-width: 0;
    // all all equal size
    flex: 1;
    &:first-child {
      margin-left: 0;
    }
  }

  // will break it to one column
  &.break, &.column {
    display: block;
    > * {
      margin-left: 0;
      &:not(:last-of-type) {
        margin-bottom: 10px;
      }
    }
    flex-direction: column;
  }

}

.toolbar-form {
  padding: 0 4px;
  display: flex;
  align-items: center;
  line-height: $topbarHeight;
  position: absolute;
  top: 0;
  min-width: 200px;
  input {
    padding-left: 2px !important;
  }
}

// input that has an icon beforehand
.wrapped-input {
  position: relative;

  .add-on {
    position: absolute;
    top: 6px;
    left: 14px;

    [class^="icon-"] {
      position: relative;
      top: 2px;
      left: 3px;
    }
  }

  .loader {
    position: absolute;
    right: 8px;
    top: 8px;
  }
  input {
    padding-left: 42px !important;
  }
}

// forms in subnav
.subnav {
  // fixes navbar searchform in firefox
  .form {
    vertical-align: middle;
    position: relative;
    top: -2px;
  }
}

// Desktop Version of Forms
@media #{$mediaDesktop} {

  .indent-label {
    margin-left: $labelWidthDesktop;
  }

  form:not(.wide) {
    .control-group {
      flex-direction: row;
    }

    .control-group > .label, .control-group > label {
      &:not(.checkbox) {
        min-width: $labelMinWidth;
        width: $labelWidthDesktop;
        text-align: $labelTextAlign;
        padding: $labelPaddingDesktop;
        position: relative;
        top: 5px;
        margin-bottom: 0;
        word-wrap: break-word;
      }
    }

    .no-label {
      margin-left: $labelWidthDesktop;
    }

    legend {
      margin-left: $labelWidthDesktop;
      margin-bottom: $legendMarginDesktop;
    }

    .multi-select-field {
      margin-top: 7px;
    }

    .controls {
      width: $formWidthControls;
      min-width: $formMinWidthControls;
    }

    fieldset:not(:last-of-type) {
      padding: 0 0 $formMarginDesktop 0;
      margin-bottom: $formMarginDesktop;
    }

  }
  .multi-form {
    &.break {
      display: flex;
      > div:not(:first-of-type) {
        margin-left: $inputMultiFormSpacing;

      }
      > div {
        &:not(:last-of-type) {
          margin-bottom: 0;
        }
      }
      flex-direction: row;
    }
  }

  .form-actions {
    align-items: center;

    flex-direction: row;
    flex-wrap: nowrap;

    label {
      margin-left: 1rem;
    }

    .left {
      > label {
        margin-left: 0;

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

    > div {
      > * {
        width: auto;
        text-align: left;
      }
    }

    p {
      margin: 0 1rem;
    }

    .button, button, input[type="submit"] {
      margin-bottom: 0;
    }

    &.break {
      margin-top: 1rem;
      flex-wrap: wrap;
      p {
        margin: 0;
      }

      .button {
        margin: 1rem 1rem 1rem 0;
      }
    }

  }

  form:not(.wide) {
    .append {
      align-self: flex-start;
      &.center {
        align-self: center;
      }
      margin: $appendMarginTopPositive 0 0 $labelWidthDesktop;
      max-width: $formWidthControls;
      min-width: $formMinWidthControls;

    }
    .control-group {
      flex-wrap: wrap;
    }

  }

}

.control-group:not(:last-of-type) .controls + .append {
  margin-top: $appendMarginTopNegative;
  margin-bottom: $controlMargin;
}

// forms in between state
@media #{$mediaInBetween} {

  form:not(.wide) {

    .controls:not(.checkbox) {
      width: $formWidthControlsBetween;
    }

    .append {
      flex: 1;
      min-width: 0;
      margin: 0 0 0 $appendMargin;
    }
  }

  .control-group:not(:last-of-type) .controls + .append {
    margin-top: 0;
  }
}