.#{$prefix}form-it {
  $margin: 20px;
  margin-bottom: $margin;
  display: flex;
  flex-wrap: wrap;

  &.#{$prefix}form-inline {
    @include medium {
      align-items: baseline;

      > .#{$prefix}label {
        display: inline-block;
        width: unset;
        flex-grow: 1;
        flex-basis: 0;
        text-align: right;
        margin: 0 30px 0 0;
        vertical-align: baseline;
      }

      > .#{$prefix}form-body {
        flex-grow: 5;
        flex-basis: 0;
      }
    }
  }

  > .#{$prefix}form-body {
    width: 100%;

    > .#{$prefix}form-el {
      width: 100%;
      margin: 0;
    }
  }

  > .#{$prefix}form-el, > .#{$prefix}btn {
    margin: {
      bottom: 0 !important;
      top: 0 !important;
      left: 0 !important;
    }
  }

  @include small {
    > .#{$prefix}form-el, > .#{$prefix}el-group {
      width: -webkit-fill-available;
      width: -moz-fill-avaialable;
      width: fill-available;
    }
  }

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

  &.zust-fullwidth {
    flex-wrap: nowrap;
  }
}

.#{$prefix}label {
  display: block;
  width: 100%;

  @if $css-variable-enabled {
    font-size: var(--form-label-font-size);
    margin: var(--form-label-margin);
  } @else {
    font-size: $form-label-font-size;
    margin: $form-label-margin;
  }
}

.#{$prefix}help {
  margin: 5px;
  display: block;
  width: 100%;

  @if $css-variable-enabled {
    font-size: var(--form-help-font-size);
    margin: var(--form-help-margin);
    margin-top: calc(var(--form-help-margin) + 3px);
  } @else {
    font-size: $form-help-font-size;
    margin: $form-help-margin;
    margin-top: $form-help-margin + 3px;
  }
}

.#{$prefix}form-el {
  margin: 0;
  display: inline-flex;
  position: relative;

  &:not(:last-child) {
    margin-bottom: 8px;
    margin-right: 8px;
  }

  &.#{$prefix}fillup {
    width: 100%;
  }

  .#{$prefix}input {
    margin: 0;
  }

  .#{$prefix}el-group > &:not(:first-child):not(:last-child) > {
    .#{$prefix}input, .#{$prefix}select {
      border-radius: 0;
    }
  }


  .#{$prefix}el-group > &:first-child > {
    .#{$prefix}input, .#{$prefix}select {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .#{$prefix}el-group > &:last-child > {
    .#{$prefix}input, .#{$prefix}select {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &.#{$prefix}responsive {
    display: flex;
  }
}