.n-form-item
  &.w-25
    width 25%
  &.w-33
    width 33.33%
  &.w-50
    width 50%
  &.w-66
    width 66.66%
  &.w-75
    width 75%
  &.w-100
    width 100%

.n-form-item
  width 100%
  display inline-flex
  align-items flex-start
  margin-bottom 16px
  &-split
    margin auto 0
    height 20px
    border-left 1px solid #cccfd3

.n-form-label
  flex-shrink 0
  font-size 12px
  min-height 20px
  padding-right 10px
  display flex
  align-items center
  color #191919
  text-align right
  &-small
    height 28px
  &-middle
    height 32px
  &-large
    height 42px
  &-required
    font-size 14px
    color #EC3751
  &-text
    width 100%
    font-size 12px
    line-height 16px
    white-space pre-wrap

// 纵向
.n-form-item-top
  flex-direction column
  .n-form-label
    width 100%
    padding-left 10px
    position relative
    text-align left
    height 20px
    &-required
      position absolute
      left -4px
    &-text
      white-space normal


.n-form-content
  width 0
  flex auto
  display flex
  align-self stretch
  flex-direction column
  position relative

.n-form-item-border
  width 100%
  display flex
  position relative
  transition border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease

.n-form-item-border > div
  &.n-form-border
    border-radius 0
    width 100%
  &.n-form-border-focus
    z-index 1
    box-shadow 0 0 0 1px $primary-color
  &:first-child
    border-top-left-radius 4px
    border-bottom-left-radius 4px
  &:last-child
    border-top-right-radius 4px
    border-bottom-right-radius 4px


.n-form-info
  font-size 12px
  line-height 20px
  display flex
  align-items center
  color #bfbfbf
  height 24px
  transition height 0.2s ease
  overflow hidden
  &-active
    height 24px
  .n-icon
    font-size 14px
    margin-right 4px
  &-error
    color $danger-color
  &-enter
  &-leave-to
    height 0


.n-form-suffix
  align-self stretch
  display flex
  align-items center
  padding 0 8px
.n-form-border-rect .n-form-suffix
  background-color #f1f3f5
  border-left 1px solid #caccd4




.n-form-item-border-small
  & > .n-radio-group
  & > .n-checkbox-group
  & > .n-switch-btn
    margin 4px 0
.n-form-item-border-middle
  & > .n-radio-group
  & > .n-checkbox-group
  & > .n-switch-btn
    margin 6px 0
.n-form-item-border-large
  & > .n-radio-group
  & > .n-checkbox-group
  & > .n-switch-btn
    margin 11px 0