// You REALLY don't want to even consider looking at this stuff!
// Most of the configuration of WFieldLayout support is done through vars.
@import 'mixins/common';
@import 'mixins/fieldlayout';

// The space remaining for the input part of a control when the WFieldLayout is
// FLAT. Do not change.
$wc-fieldlayout-input-width: 100% - $wc-fieldlayout-default-label-width;

// Vertical space between consecutive WFieldLayouts.
.wc-fieldlayout + .wc-fieldlayout,
// Vertical space between fields in a WFieldLayout.
.wc-field  + .wc-field {
  margin-top: $wc-gap-normal;
}

// This is the placeholder for a null or moved label (moved for checkbox or
// radio). Not shown on narrow viewports or in stacked field layouts.
.wc_fld_pl {
  display: none;
}

// The input container div.
.wc-input {
  margin-top: $wc-gap-small; // push off of the label.

  > .wc-input-wrapper,
  > input,
  > select,
  > textarea {
    max-width: 100%;
  }
}

// InputWidth class is added to the field to signify that an inputWidth is
// in use so we can size the components.
.wc_inputwidth {
  > .wc-input {
    > .wc-input-wrapper,
    > .wc-input-wrapper > input,
    > .wc-input-wrapper > textarea,
    > .wc-input-wrapper > select,
    > fieldset {
      @include border-box;
      width: 100%;
    }

    > .wc-input-wrapper {
      &.wc-checkbox,
      &.wc-radiobutton {
        @include fit-content;
      }

      input {
        &[type='checkbox'],
        &[type='radio'] {
          width: auto;
        }
      }
    }
  }
}

// support for WField.inputWidth
@if ($wc-fld-use-inputwidth == 1) {
  @for $i from $wc-fld-min-inputwidth through $wc-fld-max-inputwidth {
    .wc_fld_inpw_#{$i} > .wc-input {
      > .wc-input-wrapper,
      > fieldset {
        max-width: percentage(#{$i} / 100);
      }
    }
  }
} @else if ($wc-fld-use-inputwidth != 0) {
  @each $i in $wc-fld-use-inputwidth {
    .wc_fld_inpw_#{$i} > .wc-input {
      > .wc-input-wrapper,
      > fieldset {
        max-width: percentage(#{$i} / 100);
      }
    }
  }
}

// NUMBERED fields
@if ($wc-fieldlayout-allow-ordered == 1) {
  .wc_ordered {
    &,
    .wc-fieldlayout {
      counter-reset: wcfld;
    }

    > .wc-field {
      counter-increment: wcfld;

      > :first-child::before {
        content: counter(wcfld) '. ';
        margin-right: $wc-gap-small;

        .wc_ordered & {
          content: counters(wcfld, '.') ' ';
        }
      }
    }

    &.wc-layout-stacked > .wc-field {
      &::before {
        content: counter(wcfld) '. ';
        margin-right: $wc-gap-small;

        .wc_ordered & {
          content: counters(wcfld, '.') ' ';
        }
      }

      > :first-child::before {
        content: '';
        display: none;
        margin-right: 0;
      }
    }
  }
}


// FLAT layout is label  input side-by-side
@if ($wc-fieldlayout-force-stack == 0) {
  // When we have a viewport of sufficient width we can allow side-by-side
  // label: input pairs.
  .wc-layout-flat > .wc-field {
    > label,
    > span,
    > div {
      display: inline-block;
      vertical-align: text-top;

      // The first child is the label or stand-in or merely an empty
      // placeholder/spacer.
      &:first-child {
        width: $wc-fieldlayout-default-label-width;
      }
    }

    > .wc-input {
      margin-top: 0; // Remove stacked margin.
      max-width: $wc-fieldlayout-input-width;
      width: $wc-fieldlayout-input-width;
    }

    .wc-moved-label {
      @include offscreen;
    }
  }

  // Optionally allow for labelWidth settings.
  @if($wc-fieldlayout-labelwidth-prevent-override != 1) {
    // This lot does the CSS for the various allowed values of
    // WFieldLayout's labelWidth member. If you _really_ want to support all
    // values of labelWidth then you will have to change the variable
    // $wc-fld-list to be the single value -1.
    @if ($wc-fld-list == -1) {
      @for $i from 1 through 100 {
        $wc-fld-lblw: $i * 1%;
        @include wc-fld-layout($i);
      }
    } @else {
      @if ($wc-fld-widths-include-fives == 1) {
        @for $i from 1 through 20 {
          $j: $i * 5;
          @include wc-fld-layout($j);
        }
      }

      @if ($wc-fld-list != 0) {
        @each $w in $wc-fld-list {
          @include wc-fld-layout($w);
        }
      }
    }

    @if ($wc-use-respond == 1 and $wc-use-respond-fieldlayout == 1) {
      @include respond-phonelike {

        // override flat widths
        // sass-lint:disable no-important
        .wc-field {
          > .wc-label,
          > .wc-input {
            @include fit-content($imp: 1);
            max-width: 100% !important;
          }

          > .wc-input {
            margin-left: 0 !important;
          }
        }
      }
    }
  }

  @if ($wc-use-respond == 1 and $wc-use-respond-fieldlayout == 1) {
    @include respond-phonelike {
      .wc-layout-flat > .wc-field {
        > .wc-label,
        > .wc-input {
          display: block;
        }

        > [data-wc-for],
        > .wc_fld_pl {
          display: none;
        }

        > .wc-input {
          margin-top: $wc-gap-small; // push off of the label.
          max-width: 100%;
          width: 100%;
        }

        .wc-moved-label {
          @include onscreen($position: relative);
        }
      }

      @if ($wc-fieldlayout-stack-allow-indent == 1) {
        .wc-field  > .wc-input {
          // override indent
          // sass-lint:disable no-important
          margin-left: 0 !important;
          // sass-lint:enable no-important
        }
      }
    }
  }
}
