@import 'mediawiki.mixins';

@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`

/* stylelint-disable no-descending-specificity */
.mw-kartographer-link,
.mw-kartographer-maplink {
	cursor: pointer;
}

// The icon only applies to <a> types of `.mw-kartographer-link`
a.mw-kartographer-link,
.mw-kartographer-maplink {
	&:not( .mw-kartographer-autostyled ):not( .mw-kartographer-map ):not( .no-icon ) {
		/**
		 * These two files were copied from OOUI repository after the build process
		 * generated the progressive icons.
		 *
		 * See ./images/COPYING
		 *
		 * The master version of the icon is at:
		 * https://gerrit.wikimedia.org/g/oojs/ui/+/master/src/themes/wikimediaui/images/icons/mapPin.svg
		 */
		.background-image-svg( 'images/mapPin-progressive.svg', 'images/mapPin-progressive.png' );
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 16px 16px;
		background-size: contain;
		padding-left: 20px;
	}

	// One can display an iconless link by adding `class="no-icon"`
	&.no-icon {
		background: none;
		padding-left: 0;
	}
}

.mw-kartographer-map {
	.mw-kartographer-fullScreen .oo-ui-iconElement > .oo-ui-buttonElement-button {
		// Square that OOUI button
		padding-right: 0;
	}

	// Fake hover on full screen button as clicking the maps launches fullscreen
	&:hover .mw-kartographer-fullScreen .oo-ui-buttonElement-button {
		background-color: #fff;
	}
}

/**
 * Applied only when JS is enabled.
 */
.client-js {
	.leaflet-grab,
	.mw-kartographer-map {
		cursor: pointer;

		// Use the 'grab' icon with fallbacks for both the dynamic map
		// and the full-screen map from leaflet; leaflet only has the
		// vendor-specific rules, so this adds the proper fallbacks as well
		&.mw-kartographer-interactive {
			cursor: move;
			cursor: url( ./images/grab.cur ), default;
			cursor: -webkit-grab;
			cursor: -moz-grab;
			cursor: grab;

			&:active {
				cursor: url( ./images/grabbing.cur ), default;
				cursor: -webkit-grabbing;
				cursor: -moz-grabbing;
				cursor: grabbing;
			}
		}
	}

	/* stylelint-disable-next-line indentation */
	.mw-kartographer-maplink:not( .mw-kartographer-link ):not( .ve-ce-focusableNode ), /* stylelint-disable-next-line indentation */
	.mw-kartographer-map:not( .mw-kartographer-link ):not( .mw-kartographer-interactive ) {
		pointer-events: none;
		cursor: default;
	}
}

/**
 * If `$wgKartographerUseMarkerStyle = true`.
 */
a.mw-kartographer-autostyled {
	color: #fff;
	display: inline-block;
	position: relative;
	top: -0.08em;
	.box-sizing ( content-box );
	height: 0.85em;
	margin-left: 0;
	border-radius: 1px;
	padding: 0.24em 0.42em;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	vertical-align: middle;

	&:visited {
		color: #fff;
	}
}