.#{$prefix}resizable-handle {
    background-color: $panel-body-border-color;
    background-repeat: no-repeat;
}

// In neptune, the side handles are 1px width and background position is at centre of the dimension;
.#{$prefix}resizable-handle-east-over,
.#{$prefix}resizable-handle-west-over {
    background-position: center;
}

.#{$prefix}resizable-handle-south-over,
.#{$prefix}resizable-handle-north-over {
    background-position: center;
}

.#{$prefix}resizable-handle-southeast-over {
    background-position: -2px -2px;
}

.#{$prefix}resizable-handle-northwest-over {
    background-position: 2px 2px;
}

.#{$prefix}resizable-handle-northeast-over {
    background-position: -2px 2px;
}

.#{$prefix}resizable-handle-southwest-over {
    background-position: 2px -2px;
}

.#{$prefix}resizable-pinned {
    .#{$prefix}resizable-handle-east,
    .#{$prefix}resizable-handle-west {
        background-position: center;
    }
    
    .#{$prefix}resizable-handle-south,
    .#{$prefix}resizable-handle-north {
        background-position: center;
    }

    .#{$prefix}resizable-handle-southeast {
        background-position: -2px -2px;
    }
    
    .#{$prefix}resizable-handle-northwest {
        background-position: 2px 2px;
    }
    
    .#{$prefix}resizable-handle-northeast {
        background-position: -2px 2px;
    }

    .#{$prefix}resizable-handle-southwest {
        background-position: 2px -2px;
    }
}
