.n-color-picker
  .n-form-value
    display flex
    align-items center
  &-rect
    width 18px
    height @width
    margin-right 8px
    border-radius 2px
    border 1px solid rgba(0, 0, 0, 0.1)
    flex-shrink 0

.n-color-paster
  padding 16px !important
  &-box
    gap 8px
    width 227px
    display flex
    flex-wrap wrap
  &-box-item
    width 18px
    height 18px
    cursor pointer
    border-radius 2px
    border 1px solid rgba(0, 0, 0, 0.1)

  &-block
    margin-top 16px

  &-icon
    cursor pointer
    margin-right auto
  &-opacity
    width 190px
    height 10px
    background-image linear-gradient(45deg, rgb(204, 204, 204) 25%, transparent 25%), linear-gradient(-45deg, rgb(204, 204, 204) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(204, 204, 204) 75%), linear-gradient(-45deg, transparent 75%, rgb(204, 204, 204) 75%)
    background-position 0 0, 0 3px, 3px -3px, -3px 0px
    background-size 6px 6px
    border-radius 5px
    position relative
    cursor pointer
  &-opacity-bar
    border-radius 5px
    pointer-events none
  &-opacity-slider
    width 14px
    height 14px
    position absolute
    top -2px
    margin-left -7px
    border 2px solid #FFFFFF
    box-shadow rgba(0, 0, 0, 0.2) 0px 1px 4px 0px
    border-radius 50%
    pointer-events none
  &-input
    outline none
    width 36px
    height 24px
    padding 5px 0
    text-align center
    border 1px solid $n-color-5
    transition border-color 0.2s ease
    & + &
      margin-left -1px
    &[name="r"]
      border-top-left-radius 4px
      border-bottom-left-radius 4px
      margin-left 13px
    &[name="a"]
      border-top-right-radius 4px
      border-bottom-right-radius 4px
      padding-right 10px
      width 46px
    &:hover
      z-index 1
      border-color #A1ABB3
    &:focus
      z-index 2
      border-color $primary-color
  &-input-percent
    z-index 3
    color #A1ABB3
    position relative
    pointer-events none
    transform translateX(-14px)

  &-history
    padding 8px 0
    border-top 1px solid rgb(221, 221, 221)
