Cacher is the code snippet organizer for pro developers

+b.color-block
	+e.SPAN.title Цвет:
	-colorClass = 1
	while colorClass < 8
		+e.LABEL.item(class= `_${colorClass}`)
			input(type='radio' name='color-picker')
			+e.DIV.item-visual
		-colorClass++

.color-block
   display: flex
   align-items: center
   &__title
      margin-right: 10px
      +f('dpro500', 16)
   &__item
      position: relative
      flex: 0 0 32px
      height: 32px
      border-radius: 50%
      cursor: pointer
      overflow: hidden
      &:not(:last-child)
         margin-right: 10px
      input
         display: none
      input:checked ~ &-visual
         border: 1px solid $color3
      input:checked ~ &-visual::after
         transform: scale(1)
         opacity: 1
      &_1 &-visual
         background-color: #dc1b1b
      &_2 &-visual
         background-color: #e1e1df
      &_3 &-visual
         background-color: #3d3d3d
      &_4 &-visual
         background-color: #eec4dd
      &_5 &-visual
         background-color: #94959a
      &_6 &-visual
         background-color: #080808
      &_7 &-visual
         background-color: #d8c0a5
      &-visual
         +coverdiv
         border-radius: 50%
         transition: .3s ease-in-out
         &::after
            +coverdiv
            +gpu
            border: 3px solid $white
            border-radius: 50%
            opacity: 0
            transition: .3s ease-in-out
            content: ''