.nut-form-item {
  display: flex;

  &-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  &-label {
    display: flex;
    flex-direction: row;
    font-size: $form-item-label-font-size;
    font-weight: normal;
    width: $form-item-label-width;
    margin-right: $form-item-label-margin-right;
    flex: 0 0 auto;
    word-wrap: break-word;
    text-align: $form-item-label-text-align;
  }

  &-label-required {
    color: $form-item-required-color;
    margin-right: $form-item-required-margin-right;
    display: block;
    position: absolute;
    left: -0.8em;
  }

  .nut-form-item-labeltxt {
    font-size: $form-item-label-font-size;
    position: relative;
  }

  &-body {
    flex: 1;
    display: flex;
    flex-direction: column;

    &-slots {
      text-align: $form-item-body-slots-text-align;

      .nut-input {
        padding: 0;
        border: 0;
      }

      .nut-input-text {
        font-size: $form-item-body-font-size;
        text-align: $form-item-body-input-text-align;
        color: $color-title;
        width: 100%;
        outline: 0 none;
        border: 0;
        text-decoration: none;
        background: transparent;
      }

      .nut-range-container {
        min-height: 24px;
      }

      .nut-textarea {
        padding: 0;

        .nut-textarea-textarea {
          font: inherit;
          text-align: $form-item-body-input-text-align;
        }
      }
    }

    &-tips {
      text-align: $form-item-tip-text-align;
      font-size: $form-item-tip-font-size;
      color: $form-item-error-message-color;
    }
  }
}

.nut-form {
  .nut-cell-group {
    .nut-cell-group-wrap-divider {
      .nut-cell-divider {
        border-top: $cell-divider-border-bottom;
      }
    }
  }
}

[dir='rtl'] .nut-form-item,
.nut-rtl .nut-form-item {
  &-label {
    text-align: right;
    margin-right: 0;
    margin-left: $form-item-label-margin-right;

    .required {
      &::before {
        margin-right: 0;
        margin-left: $form-item-required-margin-right;
      }
    }
  }

  &-body {
    &-slots {
      text-align: right;

      .nut-icon-ArrowRight,
      .nut-icon-ArrowLeft {
        transform: rotateY(180deg);
      }

      .nut-input-text {
        text-align: right;
      }

      .nut-textarea-textarea {
        text-align: right;
      }
    }
  }

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

/* position */

.nut-form-item-label-right {
  justify-content: flex-end;
  padding-right: 24px;
  white-space: nowrap;
}

.nut-form-item-label-left {
  position: relative;
  padding-left: 12px;
  white-space: nowrap;
}

.nut-form-item-label-left-required {
  display: block;
  line-height: 1.5;
  position: absolute;
  left: 0.1em;
}

.nut-form-item-top {
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}

.nut-form-item-label-top {
  display: block;
  padding-bottom: 4px;
  padding-right: 24px;
}

.nut-form-item-body-top {
  margin-left: 0;
  width: 100%;
}

[dir='rtl'] .form-layout-right .nut-form-item-label,
.nut-rtl .form-layout-right .nut-form-item-label {
  text-align: left;
  padding-right: 0;
  padding-left: 24px;
}

[dir='rtl'] .form-layout-left .nut-form-item-label,
.nut-rtl .form-layout-left .nut-form-item-label {
  text-align: right;
  padding-left: 0;
  padding-right: 12px;

  .required {
    left: auto;
    right: 0.1em;
  }
}

[dir='rtl'] .form-layout-top .nut-form-item-label,
.nut-rtl .form-layout-top .nut-form-item-label {
  padding-right: 0;
  padding-left: 24px;
}

[dir='rtl'] .form-layout-top .nut-form-item-body,
.nut-rtl .form-layout-top .nut-form-item-body {
  margin-left: 0;
  margin-right: 0;
}