/*
 * Structure of the location maps: what they need to work (the map's height,
 * the consent placeholder over it, the markers' circles, the legend's
 * columns, the tooltip's image box). The look is the theme's (the
 * Bach-Advent theme: _bach-location-map.scss); without it a basic one from
 * Bootstrap's CSS variables, in :where(), so a theme wins although this
 * loads later. With Bootstrap (its spinner, reboot).
 */

/* Own stacking context: Leaflet's z-indexes stay inside the map */
.bach-location-map {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bach-location-map-canvas {
    height: var(--bach-map-height, 28rem);
}

.bach-location-map-single .bach-location-map-canvas {
    height: var(--bach-map-height-single, 16rem);
}

/* Left of the view switch of [bach_locations]: the cards' sort switch in the
   list view, the map's filter in the map view */
.bach-location-views:has(> [data-view="map"]:not([hidden])) .bach-location-sort-cards,
.bach-location-views:has(> [data-view="map"][hidden]) .bach-map-filter-switch {
    display: none;
}

/* Placeholder over the canvas until the map loads */
.bach-location-map-consent {
    position: absolute;
    inset: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.bach-location-map.is-loaded .bach-location-map-consent {
    display: none;
}

/* Number in marker and legend: a circle */
.bach-location-map-number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem; /* 28px, SIZE in location-map.js */
    height: 1.75rem;
    border: 2px solid;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
}

button.bach-location-map-number:not(:disabled) {
    cursor: pointer;
}

/* In the marker it fills the icon; .is-compact (too close to another) a
   dot without the number */
.bach-location-map-marker .bach-location-map-number {
    width: 100%;
    height: 100%;
}

.bach-location-map-marker.is-compact:not(.is-highlighted) .bach-location-map-number {
    color: transparent;
    transform: scale(.5);
}

/* Highlighted from the legend: larger, with its number also when compact */
.bach-location-map-marker.is-highlighted .bach-location-map-number {
    transform: scale(1.3);
}

/* Legend in columns */
.bach-location-map-legend ul {
    columns: 16rem;
    column-gap: 1.5rem;
}

/* Collapsible sections (several groups): the heading inline beside the
   browser's marker; the theme draws its own */
.bach-location-map-legend summary {
    cursor: pointer;
}

.bach-location-map-legend-group {
    display: inline;
}

.bach-location-map-legend li {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .375rem;
    break-inside: avoid;
}

/* Marker tooltip: a fixed width, the text wrapping; smaller on phones (below
   Bootstrap's md), its image too (the sizes in location-map.js: the width
   less the padding). In it the image in a square box with a spinner,
   cropped to it, hidden until loaded. */
.bach-location-map-tooltip {
    width: 12.5rem;
    padding: .5rem;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .bach-location-map-tooltip {
        width: 9.5rem;
    }
}

.bach-location-map-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: .375rem;
}

.bach-location-map-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.bach-location-map-media.bach-loaded .bach-location-map-image {
    opacity: 1;
}

.bach-location-map-media.bach-loaded .spinner-border,
.bach-location-map-media.bach-failed {
    display: none;
}

/* Name and address below each other */
.bach-location-map-tooltip strong,
.bach-location-map-tooltip-address {
    display: block;
}

/* Basic look without a theme: Bootstrap's colors; the numbers dark on white,
   also on a dark page, as the markers sit on the light map */
:where(.bach-location-map-consent) {
    background-color: var(--bs-tertiary-bg);
}

:where(.bach-location-map-number) {
    color: var(--bs-dark);
    background-color: var(--bs-white);
    border-color: var(--bs-dark);
}

:where(.bach-location-map-marker.is-highlighted .bach-location-map-number, .bach-location-map-legend li.is-highlighted .bach-location-map-number, button.bach-location-map-number:not(:disabled):hover, button.bach-location-map-number:focus-visible) {
    color: var(--bs-white);
    background-color: var(--bs-dark);
}