// Fields
@mixin wdc-form-field-wrapper() {
  margin-bottom: $wdc-spacing-m;
  position: relative;

  .wdc-form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.wdc-form-field-wrapper {
  @include wdc-form-field-wrapper();
}

@mixin wdc-form-label() {
  @include wdc-type();
  @include wdc-type-body();
  @include wdc-type-variant-label();
  display: block;
}

.wdc-form-label {
  @include wdc-form-label();
  padding: 0;
  margin-bottom: $wdc-spacing-xxxs;

  &.wdc-form-label-required:after {
    content: '*';
    display: inline-block;
    color: $wdc-color-peach-500;
    margin-left: $wdc-spacing-xxxs;
  }

  & + .wdc-form-textinput,
  & + .wdc-form-textarea,
  & + .wdc-form-select {
    margin-top: $wdc-spacing-xxs;
  }
}

// Form Groups
@mixin wdc-form-group() {
  .wdc-form-field-wrapper:last-child {
    margin-bottom: 0;
  }

  .wdc-form-group-fields {
    display: inline-block;
    flex-grow: 1;

    .wdc-form-field {
      min-height: $wdc-spacing-l;
      margin-bottom: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .wdc-form-field {
    margin-bottom: $wdc-spacing-s;
  }
}

.wdc-form-group {
  // This reset default styling of `fieldset`
  padding: 0;
  margin: 0;
  border: 0;

  margin-bottom: $wdc-spacing-m;

  @include wdc-form-group();
}

@mixin wdc-form-label-position-left() {
  .wdc-form-field-wrapper {
    &::after {
      content: '';
      flex-grow: 999;
    }

    .wdc-form-group-fields {
      margin-top: 0px;
      margin-left: $wdc-form-inline-label-width + $wdc-spacing-l;

      & > .wdc-form-field {
        margin-left: 0;
      }
    }

    .wdc-form-field {
      margin-left: $wdc-form-inline-label-width + $wdc-spacing-l;

      .wdc-form-checkbox:first-of-type,
      .wdc-form-radio:first-of-type {
        &.wdc-form-alert,
        &.wdc-form-error {
          margin: 0px;
        }
      }
    }

    & > .wdc-form-label + .wdc-form-field {
      margin-left: $wdc-form-inline-label-width + $wdc-spacing-l;
    }
  }

  .wdc-form-label {
    height: 100%;
    max-height: $wdc-spacing-xl;
    min-width: $wdc-form-inline-label-width;
    width: $wdc-form-inline-label-width;
    margin-right: $wdc-spacing-l;
    margin-bottom: 0;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
  }
}

.wdc-form-label-position-left {
  @include wdc-form-label-position-left();
}