How to add CSS styling in Mapbox GL Popup?

I've read this and several posts on SE, which pointed me in the right direction

Your link is pointing to the docs about mapbox.js which is different from mapbox-gl.js.

Docs for Mapbox GL JS: https://www.mapbox.com/mapbox-gl-js/api/#popup

There is an official Mapbox tutorial which shows also how to style a Mapbox GL JS popup using CSS: https://www.mapbox.com/help/building-a-store-locator/

The following screenshot is taken from there:

Mapbox GL JS:

If you need even more control over the styling of the popup (e.g. set background color for different types of popups), you can set a custom classname directly on the top level of the popup with:

JS:

new mapboxgl.Popup({ className: "apple-popup" })

new mapboxgl.Popup({ className: "banana-popup and-another-css-class" })

CSS:

/* change background and tip color to green */
.apple-popup .mapboxgl-popup-content {
  background-color: green;
}
.apple-popup .mapboxgl-popup-tip {
  border-top-color: green;
}

/* change background and tip color to yellow */
.banana-popup .mapboxgl-popup-content {
  background-color: yellow;
}
.banana-popup .mapboxgl-popup-tip {
  border-top-color: yellow;
}