// 输入容器
.n-filter-border
  display inline-flex
  align-items center
  position relative
  transition border .2s ease,background .2s ease,box-shadow .2s ease
  border-radius 4px
  background-color #FFF
  border 1px solid $n-color-5
  cursor pointer
  // 状态
  &-disabled
    cursor default
    background-color #F0F3F6
  &-available:hover
    border-color #A1ABB3
  &-focus
  &-focus:hover
    border-color $primary-color
  &:focus-visible
    outline none
    border-color $primary-color
// 输入内容
.n-filter-value
  outline 0
  border none
  color #1776F2
  border-radius 4px
  display block
  background-image none
  background-color transparent
  n-font-s()
  font-weight bold
  overflow hidden
  white-space nowrap
  text-overflow ellipsis
  margin-left 4px
  max-width 160px
  &-shrink
    flex-shrink 0
  &-label
    max-width unset
    margin-right 4px
    font-weight normal
    color $n-color-1
  &-multiple
    padding 0 4px
    border-radius 10px
    background-color #E8F1FE
  // 状态
  &-disabled
    cursor default
  &-uppercase
    text-transform uppercase
  // range
  &-text + &-text:before
    content ' ~ '
    color $n-color-2
  // 大于小于
  .ni-less-than
  .ni-more-than
    font-size 14px
    margin-right 3px
    vertical-align bottom

// 图标样式
.n-filter-icon
  width 16px
  font-size @width
  line-height @width
  margin-left 4px

.n-input-filter-range
  color #9AA1AD
  flex-shrink 0

.n-input-filter-info
  margin-top 8px
  color #687185
  display flex
  align-items center
  n-font-s()
  n-ellipsis()
  .n-icon
    margin-right 4px


// 小尺寸
.n-filter-border-small
  height 24px
  padding 1px 3px 1px 0
  .n-filter-value-label
    margin-right 0

// 中尺寸
.n-filter-border-middle
  height 28px
  padding 3px 7px 3px 3px

// 大尺寸
.n-filter-border-large
  height 32px
  padding 5px 7px 5px 3px