/**
 * CSS Classes Definitions
 *
 * .mw-kartographer-container:
 *     Contains either a framed or frameless .mw-kartographer-map.
 *     When framed this class is at the .thumb level.
 *     When frameless this class is at the a.mw-kartographer-map level
 *
 * .mw-kartographer-maplink:
 *     Represents a <maplink> element as output by the Parser.
 *     May or may not be an interactive link yet (meanwhile JS gets loaded).
 *
 * .mw-kartographer-map
 *    Represents a <mapframe> element as output by the Parser.
 *    May or may not be an interactive map yet (meanwhile JS gets loaded)
 *
 * .mw-kartographer-link
 *     Represents an interactive map link.
 *     The class is added when the element becomes an interactive link.
 *     May or may not be a <maplink> or <mapframe> (if created via Developer API)
 *
 * .mw-kartographer-interactive
 *    Represents an interactive map.
 *    The class is added when the element becomes an interactive map.
 *
 * .mw-kartographer-static
 *    Represents an interactive map that was made static afterward because the
 *    viewport is too small.
 *
 * .mw-kartographer-mapDialog-map
 *    Represents an interactive map within a full screen map dialog.
 *
 * .mw-kartographer-fullScreen
 *    Fullscreen button shown on all <mapframe> elments (static and interactive)
 *
 * In practice:
 *
 * - <maplink> will have .mw-kartographer-maplink first,
 *                       .mw-kartographer-link then.
 *
 * - <mapframe> will have .mw-kartographer-map first,
 *                        .mw-kartographer-link then, if displaying static snapshot.
 *                        .mw-kartographer-interactive then, if directly interactive.
 */
.mw-kartographer-error {
	display: inline-block;
	background: #ffc0cb;
}

// Bidi overrides for RTL interface
.mw-kartographer-interactive {
	.leaflet-control-container {
		.leaflet-control {
			&.leaflet-control-scale-line {
				// Should never flip, since '10km' etc is not
				// currently translateable in leaflet itself
				/* @noflip */
				direction: ltr;
			}

			&.leaflet-control-attribution {
				// Should go by interface direction
				direction: ltr;
			}
		}
	}
}

.mw-kartographer-static {
	.leaflet-control-container {
		.leaflet-top .leaflet-control {
			display: none;
		}

		.leaflet-top .leaflet-control-static {
			display: block;
		}
	}

	.leaflet-clickable {
		pointer-events: none;
	}

	&.leaflet-container {
		cursor: default;
	}
}

.mw-kartographer-fullScreen {
	position: absolute;
	top: 10px;
	right: 10px;
	margin-right: 0;
}

.mw-kartographer-map {
	direction: ltr;
	position: relative;
	display: block;
	font-size: 14px;

	&.mw-kartographer-link {
		display: block;
	}
}

// static prerendered map
.mw-kartographer-map:not( .mw-kartographer-interactive ) {
	> img {
		box-sizing: border-box;
		max-width: 100%;
		object-position: center center;
		object-fit: cover;
	}
}

// Fullwidth thumb or frameless map
.mw-kartographer-container.mw-kartographer-full {
	box-sizing: border-box;
	clear: both;
	width: 100%;

	> img {
		width: 100%;
	}

	.thumbinner {
		width: 100%;
		box-sizing: border-box;

		> a > img {
			width: 100%;
		}
	}
}

.mw-kartographer-container:not( .mw-kartographer-full ) {
	max-width: 100%;

	/* Fixes `align=center` use case */
	&.center {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

	&.thumb {
		.thumbinner {
			// prevent overflowing content area
			max-width: 100%;

			> .mw-kartographer-map {
				box-sizing: border-box;
				max-width: 100%;
			}
		}
	}
}

// Define `.floatright` and `.floatleft` for `a` elements.
// FIXME: we should not have to define this here.
/* @noflip */
a.floatright {
	float: right;
	clear: right;
	margin: 0 0 1em 1em;
}

/* @noflip */
a.floatleft {
	float: left;
	clear: left;
	margin: 0.3em 0.5em 0.5em 0;
}

@media print {
	.mw-kartographer-fullScreen,
	.leaflet-bar {
		display: none;
	}
}