$form-item-cls: #{$prefix-name}form-item;

.#{$form-item-cls} {
     $cls: $form-item-cls;
     $errorMessageHeight: 24px;
     margin-bottom: $errorMessageHeight;

     &-content {
          width: 100%;

          &-horizontal {
               display: flex;
               align-items: center;
               height: 100%;
               .#{$cls} {
                    &-field {
                         flex: 1;
                         margin-left: 10px;
                    }
               }
          }

          &-vertical {
               .#{$cls} {
                    &-label {
                         height: 24px;
                         width: 100%;
                    }
               }
          }
     }

     &-label {
          display: inline-flex;
          align-items: center;

          label {
               flex: 1;
               display: inline-block;
          }
     }

     &-label-align {
          &-left {
               text-align-last: left;
          }

          &-right {
               text-align-last: right;
          }

          &-justify {
               text-align-last: justify;
          }
     }

     &-field {
          position: relative;
     }

     &-error-message {
          color: $errorColor;
          height: $errorMessageHeight;
          line-height: 24px;
          position: absolute;
          top: 100%;
          left: 0;
     }
}