@include b(form) {
  display: block;
  margin-top: 0;
  overflow: auto;

  @include m(label-left) {
    .za-form-item__label {
      text-align: left;
    }
  }

  @include m(label-top) {
    @include b(form-item) {
      .za-form-item__label {
        text-align: left;
      }

      .za-form-item__control {
        display: block;
      }
    }
  }

  @include m(horizontal) {
    .za-form-item__label {
      display: inline-block;
      float: none;
    }
  }
}

@include b(form-item) {
  margin-bottom: 24px;

  &:before {
    content: " ";
    display: table;
    clear: both;
  }

  &:after {
    content: " ";
    display: table;
  }

  @include e(label) {
    float: left;
    vertical-align: middle;
    box-sizing: border-box;
    max-width: 100%;
    margin-bottom: 5px;
    text-align: right;
    line-height: 32px;
    padding: 0 12px 0 0;
    color: #333;
  }

  @include m(required) {
    color: $base-theme-error;
    margin-right: 1px;
    font-size: 6px;
  }

  @include e(control) {
    position: relative;
    line-height: 32px;
  }

  &.has-error {
    .za-form-item__control {
      position: relative;

      .ui-input,
      .ui-tag-input-box,
      .ui-select {
        border-color: $base-theme-error;
      }

      .za-form-item__error {
        position: absolute;
        top: 100%;
        left: 0;
        padding-top: 4px;
        line-height: 1;
        color: $base-theme-error;
        font-size: 12px;
        transition: color .3s cubic-bezier(0.165, 0.84, 0.44, 1);
      }
    }
  }
}