@import "../settings/variables";
@import "../tools/typography";

$column-gutter: 24px;
$default-line-height: 20px;
$text-editor-output-list-padding: 10px 0 10px 40px;

// WXP

.form {
  &__form {
    display: inherit;
    flex-direction: inherit;
    height: inherit;
    max-height: inherit;
  }

  &__row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    -ms-grid-rows: minmax($default-line-height, max-content)
      minmax($default-line-height, max-content);
    grid-template-rows: minmax($default-line-height, auto) minmax(
        $default-line-height,
        auto
      );
    justify-content: space-between;
    grid-column-gap: $column-gutter;
  }

  &__field {
    &__header {
      -ms-grid-row: 1;
      grid-row: 1;
      align-self: end;
    }
    &__main {
      --core-input-error-border-color: #{$core-red-50};
      --core-input-error-background-color: #{$core-white};

      -ms-grid-row: 2;
      grid-row: 2;

      &--read {
        @include sm-medium--primary();
        word-wrap: break-word;
      }
    }
    &__required-mark {
      padding-left: spacing(xs);
      vertical-align: top;
    }
    &__tooltip-icon {
      margin-left: spacing(sm);
      color: color-palette(gray, 75);
    }
    &__error-icon {
      vertical-align: sub;
    }
    &__banner {
      min-height: 22px;
      margin-bottom: 2px;

      // TODO: Remove temp styles below if using Typography or JSS functions
      color: $core-red-50;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.15px;
      line-height: 20px;
      word-break: break-word;
      word-wrap: break-word;
    }

    &--col-start-1 {
      -ms-grid-column: 1;
      grid-column-start: 1;
    }
    &--col-start-2 {
      -ms-grid-column: 2;
      grid-column-start: 2;
    }
    &--col-start-3 {
      -ms-grid-column: 3;
      grid-column-start: 3;
    }
    &--col-start-4 {
      -ms-grid-column: 4;
      grid-column-start: 4;
    }
    &--col-start-5 {
      -ms-grid-column: 5;
      grid-column-start: 5;
    }
    &--col-start-6 {
      -ms-grid-column: 6;
      grid-column-start: 6;
    }
    &--col-start-7 {
      -ms-grid-column: 7;
      grid-column-start: 7;
    }
    &--col-start-8 {
      -ms-grid-column: 8;
      grid-column-start: 8;
    }
    &--col-start-9 {
      -ms-grid-column: 9;
      grid-column-start: 9;
    }
    &--col-start-10 {
      -ms-grid-column: 10;
      grid-column-start: 10;
    }
    &--col-start-11 {
      -ms-grid-column: 11;
      grid-column-start: 11;
    }
    &--col-start-12 {
      -ms-grid-column: 12;
      grid-column-start: 12;
    }

    &--col-end-2 {
      grid-column-end: 2;
    }
    &--col-end-3 {
      grid-column-end: 3;
    }
    &--col-end-4 {
      grid-column-end: 4;
    }
    &--col-end-5 {
      grid-column-end: 5;
    }
    &--col-end-6 {
      grid-column-end: 6;
    }
    &--col-end-7 {
      grid-column-end: 7;
    }
    &--col-end-8 {
      grid-column-end: 8;
    }
    &--col-end-9 {
      grid-column-end: 9;
    }
    &--col-end-10 {
      grid-column-end: 10;
    }
    &--col-end-11 {
      grid-column-end: 11;
    }
    &--col-end-12 {
      grid-column-end: 12;
    }
    &--col-end-13 {
      grid-column-end: 13;
    }

    &--col-ie-span-1 {
      -ms-grid-column-span: 1;
    }
    &--col-ie-span-2 {
      -ms-grid-column-span: 2;
    }
    &--col-ie-span-3 {
      -ms-grid-column-span: 3;
    }
    &--col-ie-span-4 {
      -ms-grid-column-span: 4;
    }
    &--col-ie-span-5 {
      -ms-grid-column-span: 5;
    }
    &--col-ie-span-6 {
      -ms-grid-column-span: 6;
    }
    &--col-ie-span-7 {
      -ms-grid-column-span: 7;
    }
    &--col-ie-span-8 {
      -ms-grid-column-span: 8;
    }
    &--col-ie-span-9 {
      -ms-grid-column-span: 9;
    }
    &--col-ie-span-10 {
      -ms-grid-column-span: 10;
    }
    &--col-ie-span-11 {
      -ms-grid-column-span: 11;
    }
    &--col-ie-span-12 {
      -ms-grid-column-span: 12;
    }
  }

  &__output {
    &--text-area {
      white-space: pre-wrap;
    }

    &--rich-text {
      color: initial;
      font-size: initial;
      font-weight: normal;
      line-height: initial;
      letter-spacing: initial;

      ol {
        padding: $text-editor-output-list-padding;
        list-style: decimal;
      }
      ul {
        padding: $text-editor-output-list-padding;
        list-style: circle;
      }
      p {
        margin: 0;
        line-height: inherit;
      }
    }
  }

  &__input--checkbox {
    margin-top: spacing(xs);
  }

  &__input--checkboxes-fieldset,
  &__input--radio-buttons-fieldset {
    border: none;
    margin-top: spacing(xs);
    padding: 0;
  }
}

// IE11 support grid-column-gap
// bug: if a field's first column isn't at 1,
// the field will fill the padding and be wider
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .form__field__header {
    padding-left: $column-gutter;

    &:first-child {
      padding-left: 0;
    }
  }

  .form__field__main {
    padding-left: $column-gutter;

    &:nth-child(2) {
      padding-left: 0;
    }
  }
}

// TRADITIONAL

$traditional-border: rgb(216, 216, 216);
$traditional-bg-gray: rgb(242, 242, 242);
$traditional-bg-white: $core-white;
$traditional-padding: 10px;
$traditional-font-size: 13px;
$traditional-line-height: 20px;

.traditional-form {
  &__row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 20% 30% 20% 30%;
    grid-template-columns: 20% 30% 20% 30%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    border-top: 1px solid $traditional-border;
    background-color: $traditional-bg-white;

    &:last-of-type {
      border-bottom: 1px solid $traditional-border;
    }

    &--read {
      &:nth-child(2n + 1) {
        background-color: $traditional-bg-gray;
      }

      & > .traditional-form__column:nth-child(2) {
        border-right: 1px solid $traditional-border;

        &:last-child {
          border-right: none;
        }
      }
    }
  }

  &__column {
    padding: $traditional-padding;
    align-self: center;
    height: 100%;

    &:nth-child(1) {
      -ms-grid-column: 1;
    }
    &:nth-child(2) {
      -ms-grid-column: 2;
    }
    &:nth-child(3) {
      -ms-grid-column: 3;
    }
    &:nth-child(4) {
      -ms-grid-column: 4;
    }

    &--full-width {
      grid-column: 2 / 5;
      -ms-grid-column-span: 3;
    }
  }

  &__required-mark {
    padding-left: spacing(xs);
    vertical-align: top;
  }

  &__label {
    display: inline-block;
    font-size: $traditional-font-size;
    line-height: $traditional-line-height;
    word-break: break-word;
    word-wrap: break-word;

    &--create,
    &--update {
      padding-top: spacing(sm);
    }
  }

  &__tooltip-icon {
    margin-left: spacing(sm);
    color: color-palette(gray, 75);
  }

  &__output {
    font-weight: bold;
    font-size: $traditional-font-size;
    line-height: $traditional-line-height;
    word-wrap: break-word;
  }
}