$width: 100px
$controls_width: 20px


.root
    width: $width
    position: relative


.controls
    +absolute('', $gutter_sm, 0)
    display: flex
    flex-direction: column

    button
        background: none
        cursor: pointer
        height: 20px

        &:hover:not(.button__disabled) i
            color: $primary
    
    i
        transition: color $transition
        font-size: 20px

.value_increment_icon i
    transform: rotate(-90deg)

.value_decrement_icon i
    transform: rotate(90deg)


.field
    padding-right: $controls_width + $gutter_sm


._disabled_all .field
    color: $border_color_light
    
button.button__disabled
    cursor: default
    pointer-events: none
    
    i
        color: $border_color_light