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

.n-form-border-disabled:not(.n-form-border-none)
  background-color #F0F3F6
.n-form-border-rect > .n-form-border-disabled
  background-color #F0F3F6

// 输入内容
.n-form-value
  outline 0
  border none
  color $n-color-1
  border-radius 4px
  display block
  background-image none
  background-color transparent
  &-placeholder
  &::placeholder
    color $n-color-4
  &-multiple
    padding-top 3px
    padding-bottom 0
  &-ellipsis
    n-ellipsis()
  &-picker
    cursor pointer
  // 状态
  &-disabled
    cursor default
  &-uppercase
    text-transform uppercase
  &-text + &-text:before
    content ' ~ '

.n-form-border-multiple.n-form-border-disabled
  cursor default

// 图标样式
.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
  align-content flex-start
  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
  &.clickable
    cursor pointer
  &-placeholder
  &-search
    flex auto
    font-size 12px
    line-height 20px
    padding 0
    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

// 多行文本
.n-form-value-array
  display flex
  align-items center
  // 多行文本 主内容
  .n-form-refer-main
    width 0
    flex auto
    n-ellipsis()
  // 多行文本 附加内容
  .n-form-refer-text
    color #adb5bd
    padding-left 8px
    flex-shrink 0
    n-ellipsis()
    max-width 80%
.n-form-refer-array
  max-width calc(100% - 16px)
  display inline-block
  n-ellipsis()
  .n-form-refer-text
    color #adb5bd
    padding-left 8px

// 小尺寸
.n-form-border-small
  .n-form-value
    n-font-s()
    min-height 26px
    padding 3px 7px

// 中尺寸
.n-form-border-middle
  .n-form-value
    n-font-s()
    min-height 30px
    padding 5px 7px

// 大尺寸
.n-form-border-large
  .n-form-value
    font-size 14px
    line-height 26px
    min-height 40px
    padding 7px 9px

// 所有尺寸
.n-form-border
  .n-form-value-right-icon
    padding-right 26px


/** 多选 **/

// 小尺寸
//.n-form-border-multiple
.n-form-border-small
  .n-form-refer
    padding 1px 7px
    border-radius 10px
  .n-form-refer-placeholder
  .n-form-refer-search
    padding-left 2px

// 中尺寸
.n-form-border-middle
  .n-form-refer
    padding 3px 7px
    border-radius 12px
  .n-form-refer-placeholder
  .n-form-refer-search
    padding 2px

// 大尺寸
.n-form-border-large
  .n-form-refer
    padding 8px 7px
    border-radius 17px
  .n-form-refer-placeholder
  .n-form-refer-search
    padding 7px 4px