.n-note
  display inline-block
  color $n-color-1
  max-width 100%
  n-ellipsis()
  n-font-s()
  &-wrap
    white-space normal
    word-break break-all
  &-label
    font-weight bold
  &-label:after
    content ':'
    padding-left 2px
    padding-right 4px
  &-flex
    display flex
    align-items center
    .n-description-value
      flex auto
      n-ellipsis()

.n-note-list
  // 横向顺序排列
  &-text .n-note + .n-note
    margin-left 24px
  // 横向自动占满
  &-horizontal
    display flex
    align-items center
  &-horizontal .n-note
    flex auto
  // 纵向排列
  &-vertical .n-note
    display block
  // 流式布局
  &-flow
    display flex
    align-items flex-start
    flex-wrap wrap
  &-flow .n-note
  &-flow .n-node-empty
    flex auto
    width 138px
    min-width 138px


.n-note-list-space
  // 中等间距
  &-middle .n-note
    padding-top 4px
    padding-bottom @padding-top
    min-height 28px


.n-note-list-scene
  padding 8px 16px
  border-width 1px
  border-radius 4px
  & + &
    margin-top 8px
  &-info
    background #d7e8fc
    border-color #bbdfff
  &-success
    background #ebfae8
    border-color #d9f6d5
  &-warning
    background #fff3e0
    border-color #ffe3b9
  &-error
    background #fbeaed
    border-color #ffdee3