@import 'mediawiki.mixins';
@import '../lib/external/wikimedia-ui-base';

/* stylelint-disable no-descending-specificity */
.mw-kartographer-interactive {
	z-index: 0;

	&.leaflet-container {
		color: @color-base;
		// Default to Vector's base font-size
		font-size: 14px;
		font-family: @font-family-base;

		.marker-description img {
			width: 100%;
			height: auto;
			margin-bottom: 0;
			margin-top: 0.5em;
		}

		a {
			color: @color-primary;

			&:hover {
				color: @color-primary--hover;
				text-decoration: underline;
			}

			&:active {
				color: @color-primary--active;
			}

			&:focus {
				color: @color-primary--focus;
			}

			// These colors are copied from mediawiki.skinning/elements.css
			&.new {
				color: #d33;

				&:visited {
					color: #a55858;
				}
			}
		}
	}

	/* Leaflet Popups */

	.leaflet-popup-content {
		padding: 1em;
	}

	.leaflet-popup-content .marker-title {
		text-align: center;

		& > a {
			font-weight: bold;
		}
	}

	.leaflet-popup-content .marker-description {
		text-align: center;
	}

	.leaflet-popup-content-wrapper,
	.map-legends,
	.map-tooltip {
		border-radius: @border-radius-base;
	}

	/* Leaflet Controls */
	&.leaflet-touch .leaflet-bar {
		border: 0;
	}

	.leaflet-draw-actions,
	.leaflet-control-layers,
	.leaflet-bar {
		background-color: @background-color-framed;
		border: 0;
		box-shadow: none;
	}

	.leaflet-draw-toolbar .draw-actions {
		// Override the background in this specific case, since
		// the buttons are another level down, and get a background color
		background-color: unset;
	}

	.leaflet-draw-actions a,
	.leaflet-bar > a {
		background-color: @background-color-framed; // Override Leaflet.Draw default
		color: @color-base;
		.box-sizing( content-box );
		border: @border-base;
		border-radius: @border-radius-base;
		border-bottom-width: 0;
		.transition( ~'background-color @transition-ease-quick, color @transition-ease-quick, border-color @transition-ease-quick, box-shadow @transition-ease-quick' );

		&:hover {
			background-color: @background-color-framed--hover;
			color: @color-base--hover;
			border-color: @border-color-base--hover;
		}

		&:active {
			background-color: @background-color-framed--active;
			color: @color-base--active;
			border-color: @border-color-base--active;
		}

		&:focus {
			border-color: @color-primary--focus;
			outline: 0;
			box-shadow: @box-shadow-primary--focus;
		}

		&:only-of-type {
			border-radius: @border-radius-base;
			border-bottom-width: @border-width-base;

			&:hover {
				border-radius: @border-radius-base;
			}
		}

		&:first-child:not( :only-of-type ) {
			border-radius: @border-radius-base @border-radius-base 0 0;
		}

		&:last-child {
			border-bottom: @border-width-base solid;
			border-color: @border-color-base;

			&:hover {
				border-color: @border-color-base--hover;
				border-bottom-width: @border-width-base;
			}

			&:active {
				border-bottom-width: @border-width-base;
				border-color: @border-color-base--active;
			}

			&:not( :only-of-type ) {
				border-radius: 0 0 @border-radius-base @border-radius-base;
			}
		}
	}

	.leaflet-bar > .oo-ui-icon-close,
	.leaflet-bar > .oo-ui-icon-fullScreen {
		background-position: center center;
	}

	.leaflet-control-attribution:after,
	.leaflet-control-zoom-in,
	.leaflet-control-zoom-out,
	.leaflet-popup-close-button,
	.leaflet-control-layers-toggle,
	.map-tooltip .close,
	.leaflet-container.dark .map-tooltip .close,
	.mapbox-icon {
		opacity: @opacity-base;
	}
}