/**
 * How a marker that does not match the current search looks.
 *
 * Deliberately still visible and still clickable: the whole point is to keep
 * the surrounding context on the map rather than have pins disappear as the
 * filter narrows. Only the emphasis changes.
 */

.map-marker.cmm-dim,
.cmm-dim .map-marker {
	opacity: 0.28;
	filter: grayscale( 1 );
	transition: opacity 0.18s ease, filter 0.18s ease;
	z-index: 1;
}

.map-marker.cmm-dim:hover,
.cmm-dim .map-marker:hover {
	opacity: 0.75;
	filter: grayscale( 0.3 );
}

/* A matching marker sits above the dimmed ones, so it is never hidden behind
   a pin that does not match. */
.map-marker[data-cmm]:not(.cmm-dim) {
	z-index: 2;
}

@media ( prefers-reduced-motion: reduce ) {
	.map-marker.cmm-dim,
	.cmm-dim .map-marker {
		transition: none;
	}
}

/**
 * The other way to say "does not match": gone.
 *
 * Used when dimming is switched off, which gives the preloading without the
 * visual change. Kept out of the layout entirely rather than made transparent,
 * so it cannot be clicked by accident.
 */
.marker-wrapper.cmm-hidden,
.map-marker.cmm-hidden {
	display: none !important;
}

/**
 * A post type that is not the one being searched.
 *
 * One map can serve several post types through a single search form, and only
 * one of them is being looked at. The others come off entirely rather than
 * fading, because they are a different kind of thing rather than a near miss.
 */
.marker-wrapper.cmm-type-off,
.map-marker.cmm-type-off {
	display: none !important;
}

/**
 * The pin for the result being pointed at.
 *
 * Lifted rather than recoloured, so it reads as "this one" without competing
 * with whatever the marker already says about the listing itself.
 */
.marker-wrapper.cmm-hover,
.map-marker.cmm-hover {
	z-index: 10;
	transform: scale( 1.25 );
	transform-origin: center bottom;
	transition: transform 0.15s ease;
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, 0.35 ) );
}

/* A pin worth pointing out is worth seeing, even if the search does not match it. */
.marker-wrapper.cmm-hover.cmm-dim,
.cmm-hover .map-marker {
	opacity: 1;
	filter: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.marker-wrapper.cmm-hover,
	.map-marker.cmm-hover {
		transition: none;
	}
}

/*
 * The map stays awake while results load.
 *
 * Voxel fades the map widget and lays a full-cover pseudo-element over it for
 * the duration of a search, so that nobody drags a map whose markers are
 * mid-replacement. Ours are not being replaced - they were loaded once, up
 * front, and every pin the visitor can see is already correct - so that cover
 * is a wait for something that is not happening.
 *
 * Only ever active while our markers really are the ones on the map: the class
 * is put on by the script, which takes it off again the moment the map goes
 * back to being fed by the search response.
 *
 * Specificity is enough on its own (0,2,0 against 0,1,0), so no !important:
 * a theme that genuinely wants its own loading treatment can still have it.
 */
.cmm-live .map-pending {
	opacity: 1;
}

.cmm-live .map-pending::before {
	content: none;
}

/*
 * The pile of listings that did not match.
 *
 * Clustering only the matches leaves every other listing on the map as its own
 * pin, so narrowing a search makes the map busier instead of clearer. They are
 * clustered too, in a second pile of their own, and this is what tells the two
 * apart: the same treatment the individual faded markers get, so a map reads
 * the same whether it is clustered or not.
 *
 * Deliberately still visible. The point of the add-on is that you can see there
 * is something there.
 */
.cmm-cluster-dim .ts-marker-cluster {
	opacity: 0.38;
	filter: grayscale( 1 );
	box-shadow: none;
	background-color: var( --ts-shade-3, #8a8a8a );
	transition: opacity 0.18s, filter 0.18s;
}

.cmm-cluster-dim:hover .ts-marker-cluster {
	opacity: 0.8;
	filter: grayscale( 0.3 );
}

/* A faded pile never sits on top of the results. */
.cmm-cluster-dim {
	z-index: 1;
}