How to add flexbox to the content inside of ngb-toast

I'm working in a project where we have implemented ng-bootstrap and I'm now working on the toast-component and to it more suitible for our company.

What I'm trying to achive right now is to make a button inside of the toast to be on the far right while the text will be on the left. Right now the button comes directly after the text, which leaves a lot of space to the right of the button.

In the documentation (https://ng-bootstrap.github.io/#/components/toast/overview) they say:

We provide a dedicated ngb-toasts CSS class you could use, or write your own styles in case some specificities would be needed.

However per my understanding is that it only styles the toast it self and not the things inside of it, which is what I want to do.

I'm trying to achive this by adding in flexbox

SCSS

.toast {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .text,
      button {
        align-self: center;
      }
}

HTML

<ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" class="toast">
  <ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text" class="text">
    <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
  </ng-template>
  <ng-template #text class="text">
    <span>
      {{ toast.textOrTpl }}
    </span>
  </ng-template>
  <button class="btn ml-2" [class]="toast.classname" (click)="toastService.remove(toast)">
    {{toast.button}}
  </button>
</ngb-toast>

When I build the application and runs it, I can see in the browsers devtool that ng-bootstrap has added a new div with class="toast-body".

First question I have is why does it get added and for what reason?

This new div then contains my text and my button, which means that the they aren't affected by my flexbox that I added in the (now parentclass to toast-body).

I tried to address this issue in a simple way by adding in the newly created div in my style.css as well.

SCSS

.toast {
    & >.toast-body {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .text,
      button {
        align-self: center;
      }
    }
  }

Sadly this approach doesn't work, the styles aren't hitting <div class="toast-body">.

What do I need to change / do in order to get the result I want? How can I make sure that my styles trigger <div class="toast-body"> and the content inside of the div?