[Bug] --front-toast-height shared between different positions, breaks stack styling

[zefj]

Describe the feature / bug 📝:

When you render toasts in different positions, one ol element per position is inserted into the DOM. However, the --front-toast-height variable value is shared between them and always takes the height of the last rendered toast regardless of its position, which leads to broken styling of the toast stacks. See the recording below:

Screen.Recording.2024-05-16.at.12.24.06.mov

Steps to reproduce the bug 🔁:

1. Render two single-line toasts in one position
2. Render a multi-line toast in another position

I believe making the --front-toast-height value independent for each position container would solve the problem.