/*
 * Keep Leaflet map layers inside the form field stacking context.
 * Leaflet panes and controls use z-index values up to 1000, which otherwise
 * paint above Unfold's sticky header and submit row (z-40).
 */
.admin-map-widget {
    isolation: isolate;
    position: relative;
    z-index: 0;
}

.admin-map-widget .leaflet-container {
    position: relative;
    z-index: 0;
}

/* Unfold sticky chrome above in-page maps. */
#main > .sticky.top-0,
#submit-row {
    z-index: 50 !important;
}

/* The viewer's terrains take Unfold's primary colour, light or dark, over Leaflet's blue; a
 * terrain coloured by its source (participation) keeps the colour it was drawn with. A stylesheet
 * rule beats the presentation attributes Leaflet writes, so the selected one is thicker whatever
 * its colour. */
.map-viewer-terrain {
    stroke-width: 1.5;
    fill-opacity: 0.2;
    transition: fill-opacity 120ms ease;
}

.map-viewer-terrain:not(.map-viewer-terrain--coloured) {
    stroke: var(--color-primary-600);
    fill: var(--color-primary-600);
}

.map-viewer-terrain:hover {
    fill-opacity: 0.35;
}

/* Two classes, so the selection's outline wins over the uncoloured terrains' primary stroke:
 * a dark outline reads on any participation colour, and the selected terrain is brought to the
 * front so its neighbours never cover it. */
.map-viewer-terrain.map-viewer-terrain--selected {
    stroke: var(--color-base-900);
    stroke-width: 3.5;
    fill-opacity: 0.55;
}

.dark .map-viewer-terrain.map-viewer-terrain--selected {
    stroke: #fff;
}