$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

        &:first-child > i
            transform: rotate(-90deg)
        
        &:last-child > i
            transform: rotate(90deg)

        & > i
            transition: color $transition
            font-size: 20px

.button__disabled
    cursor: default
    pointer-events: none
    
    & > i
        color: $border_color_light


.field
    padding-right: $controls_width + $gutter_sm

    ._disabled_all &
        color: $border_color_light