// 输入容器
.n-form-border
  cursor pointer
  position relative
  //display inline-block
  transition border .2s ease,background .2s ease,box-shadow .2s ease
  // 边框
  &-line
    background-color #FFF
    border-bottom 1px solid $n-color-5
  &-rect
    border-radius 4px
    background-color #FFF
    border 1px solid $n-color-5
  // 可点击
  &-available&-pointer
    cursor pointer
  // 状态
  &-disabled
    background-color #F0F3F6
  &-available:hover
    border-color #A1ABB3
  &-focus
  &-focus:hover
    border-color $primary-color
  &-info-error
  &-info-error:hover
    border-color $danger-color

// 输入内容
.n-form-value
  outline 0
  border none
  color $n-color-1
  border-radius 4px
  display block
  background-image none
  background-color transparent
  // 大小
  &-small
    n-font-s()
    min-height 26px
    padding 3px 7px
  &-middle
    n-font-s()
    min-height 30px
    padding 5px 7px
  &-large
    font-size 14px
    line-height 26px
    min-height 40px
    padding 7px 9px
  &-icon
    padding-right 26px
  &-placeholder
  &::placeholder
    color $n-color-4
  &-multiple
    padding-top 3px
    padding-bottom 0
  //display flex
  //flex-wrap wrap
  &-ellipsis
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
  &-picker
    cursor pointer
  // 状态
  &-disabled
    cursor default
  &-uppercase
    text-transform uppercase
  &-right-icon
    padding-right 26px

// 图标样式
.n-form-icon
  top 50%
  right 0
  width 26px
  font-size 16px
  line-height @width
  position absolute
  transform translateY(-50%)

.n-form-border-multiple
  display flex
  flex-wrap wrap
  align-items center
  padding 3px 26px 0 5px

.n-form-refer
  cursor text
  max-width 100%
  font-size 12px
  line-height 16px
  margin 0 4px 3px 0
  white-space nowrap
  display inline-flex
  align-items center
  transition all 0.2s ease
  border 1px solid #e5e6eb
  color $n-color-1
  &-small
    padding 1px 7px
    border-radius 10px
  &-middle
    padding 3px 7px
    border-radius 12px
  &-large
    padding 8px 7px
    border-radius 17px
  &-placeholder
  &-search
    flex auto
    font-size 12px
    line-height 16px
    padding 4px 2px
    margin 0 4px 3px 0
    outline 0
    border none
    background-image none
    background-color transparent
    width 100px
  &-placeholder
    color $n-color-4
  &-icon
    visibility hidden
    transform translateX(4px)
.n-form-border-available > .n-form-refer:hover
  border-color #006ce1
  background-color #e1edfa
  .n-form-refer-icon
    visibility visible