popper.js and tooltip arrow wrongly position when using text-align: right

Question

I'm using popper.js in my angular project to float my tooltips correctly. But there is an issue with my tooltip's arrow. When the parent div that is holding the tooltip button and tooltip itself has text-align: right/end set, the tooltip arrow is moved also to the right from the centre of tooltip box. This is only happening when text-align is right or end, if the value is left, start or centre, everything works fine. Anybody had this issue or knows why it could be happening?

Here is the HTML code for tooltip:

<div
  [@togglePopover]="animationState"
  (@togglePopover.done)="onAnimationDone($event)"
  class="popover popover--{{ size }}"
  [ngClass]="{ 'popover--light': lightTheme }"
>
  <div class="popover-arrow" data-popper-arrow></div>
  <span *ngIf="content" class="richtext" [ngClass]="{ dark: !lightTheme }" [innerHTML]="content"></span>
  <ng-template *ngIf="!content" [ngTemplateOutlet]="popoverTemplate"></ng-template>
</div>

and SCSS code for arrow style:

$popover-arrow-size: 10px;
$popover-arrow-position: math.div(-$popover-arrow-size, 2);

.popover {
  &-arrow,
  &-arrow::before {
    position: absolute;
    width: $popover-arrow-size;
    height: $popover-arrow-size;
    background: inherit;
  }

  &-arrow {
    visibility: hidden;
  }

  &-arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }
}