Default popup styling is poor - emulate Leaflet.js

Motivation

The default design of popups is quite poor, and requires extra work to make look nice.

• The close button is very small
• Padding is non-optimal, so it looks cramped
• The hard, non-rounded corners of the box make it look unsubtle
• Compared also to Leaflet.js, there is also no fade in, which adds a touch of class
• There is no shadow, so it doesn't stand out well.

https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/

Design alternatives / mock-up

The following overrides to the CSS essentially emulate the Leaflet.js style, which is more pleasing. It would be good to merge these into the core styles.

/* Popups (adjustments to emulate Leaflet.js) - see https://github.com/mapbox/mapbox-gl-js/issues/8368 */
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
.mapboxgl-popup {animation: fadein 0.2s;}
.mapboxgl-popup-content {max-width: 300px; min-width: 50px; border-radius: 12px; padding: 13px 19px; box-shadow: 0 3px 14px rgba(0,0,0,0.4); min-width: 300px;}
.mapboxgl-popup-close-button {font-size: 16px; font-family: Tahoma, Verdana, sans-serif; color: #c3c3c3; font-weight: bold;}
.mapboxgl-popup-close-button:hover {color: #999; background-color: white; border-top-right-radius: 12px;}
body .mapboxgl-map {line-height: 1.4;}

(I release this into the public domain, with no attribution requirement.)

Start by comparing the popup styling in mapbox-gl-js with the linked popup example and the CSS overrides in the issue. Update the default popup presentation to cover the requested close-button sizing, spacing, rounded corners, fade-in, and shadow, then verify the popup matches the stated design.