@import "../cell/index";

.nut-theme-dark {
  .nut-form-item {
    &__body {
      &__slots {
        :deep(.nut-input) {
          color: $dark-color;
          background: transparent;
        }
      }
    }
  }
}

.nut-form-item {
  display: flex;

  &::before {
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    box-sizing: border-box;
    pointer-events: none;
    content: "";
    transform: scaleX(0);
  }

  &.error {
    &.line {
      &::before {
        border-bottom: 1px solid $form-item-error-line-color;
        transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
        transform: scaleX(1);
      }
    }
  }

  &__label {
    display: inline-block !important;
    flex: none !important;
    width: $form-item-label-width;
    margin-right: $form-item-label-margin-right;
    font-size: $form-item-label-font-size;
    font-weight: normal;
    text-align: $form-item-label-text-align;
    word-wrap: break-word;

    &:deep(.nut-cell__title) {
      min-width: auto;
    }

    &.required {
      &::before {
        margin-right: $form-item-required-margin-right;
        color: $form-item-required-color;
        content: '*';
      }

      &.nut-form-item__star-right {
        &::before {
          content: none;
        }

        &::after {
          margin-left: $form-item-required-margin-right;
          color: $form-item-required-color;
          content: '*';
        }
      }
    }
  }

  &__body {
    display: flex !important;
    flex: 1;
    flex-direction: column;

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

      :deep(.nut-input) {
        flex: 1;
        font-size: $form-item-body-font-size;
        color: $black;
        text-align: $form-item-body-input-text-align;
        text-decoration: none;
        background: transparent;
        border: 0;
        outline: 0 none;
      }

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

      :deep(.nut-textarea) {
        padding: 0 !important;

        .nut-textarea__textarea {
          text-align: $form-item-body-input-text-align;
        }
      }
    }

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

  &__right {
    --nut-form-item-label-text-align: right;
  }

  &__top {
    flex-direction: column;

    .nut-form-item__label {
      box-sizing: border-box;
      display: block;
      width: 100%;
      padding-right: 24px;
      padding-bottom: 5px;
    }
  }
}