ANGULAR - Cursor 'resize' on drag - html

Question

I am writing, because I have a problem with my resizeable component.
I want have only cursor 'resize' instead of 'not-allowed' on drag.
Could you please for your help?
Component
resizeable.component.ts
import { Component, ContentChild, ElementRef, OnDestroy, ViewChild } from '#angular/core';
import { Subject } from 'rxjs';
#Component({
selector: 'app-resizeable',
templateUrl: './resizeable.component.html',
styleUrls: ['./resizeable.component.scss']
})
export class ResizeableComponent implements OnDestroy {
#ViewChild('line') line: ElementRef;
#ContentChild('content') content: ElementRef;
initHeight: number;
initPositionY: number;
private unsubscribe$: Subject<void> = new Subject<void>();
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
onDrag(event: DragEvent): void {
const height = this.initHeight + (event.clientY - this.initPositionY);
this.content.nativeElement.style.height = `${height}px`;
event.preventDefault();
}
onDragEnd(event: DragEvent): void {
event.preventDefault();
}
onDragStart(event: DragEvent): void {
event.dataTransfer.effectAllowed = 'move';
this.initHeight = this.content.nativeElement.getBoundingClientRect().height;
this.initPositionY = event.clientY;
}
}
resizeable.component.html
<ng-content></ng-content>
<div
#line
*ngIf="content"
(dragend)="onDragEnd($event)"
(dragstart)="onDragStart($event)"
(drag)="onDrag($event)"
class="break-line"
draggable="true"
>
<hr />
</div>
resizeable.component.scss
.break-line {
cursor: row-resize;
height: 0.5rem;
margin-top: 3rem;
width: 100%;
-webkit-user-drag: element;
-webkit-user-select: none;
}