.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: ''