custom styles in toastOptions causes flipped toasts

[ParkerGibbons]

Describe the bug

I've run into this with a few different ways that I've tried to add custom styling to the default toasts. In a nutshell, the default ones seem to be doing something to hide the toast content when shown in the Toaster stack. But when I use toastOptions to apply styles to the toasts, the toasts below the top one in the Toaster stack show upside down or clipping content in weird ways.

How can I avoid this behavior?

Default dark theme toasts:

CleanShot.2024-03-21.at.14.38.59.mp4

Styled toasts via toastOptions:

CleanShot.2024-03-21.at.14.40.04.mp4

Reproduction

see attached videos

Logs

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 810.39 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - ~/.nvm/versions/node/v20.5.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.5.0/bin/npm
    pnpm: 8.7.6 - ~/node_modules/.bin/pnpm
  Browsers:
    Chrome: 123.0.6312.59
    Safari: 17.3.1
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.3.2 
    svelte: ^4.2.3 => 4.2.3 
    svelte-sonner: ^0.3.19 => 0.3.19

Severity

annoyance

[ParkerGibbons]

this also happens with leaving all properties at default and using a custom component with the toast.custom() method

[Schmell]

I am using custom styles like this and have not noticed this.
maybe try to remove a class at a time to see if something specific is causing this.

Also have you been able to style to the buttons with this method? I have not and have a discussion open but with no response. If you could try and let me know I would really appreciate it.
Thanks