@import "mediawiki.mixins.less";
@import "mediawiki.ui/variables";

/* Code adapted from Yair Rand's NavPopupsRestyled.js
 * https://en.wikipedia.org/wiki/User:Yair_rand/NavPopupsRestyled.js
 */

#mwe-popups-svg {
	position: absolute;
	top: -1000px;
}

.mwe-popups-border-triangle-top(@size, @left, @color, @extra) {
	content: '';
	position: absolute;
	border: ( @size + @extra ) solid transparent;
	border-top: 0;
	border-bottom: ( @size + @extra ) solid @color;
	top: -@size;
	/* @noflip */
	left: @left;
}

.mwe-popups-border-triangle-bottom(@size, @left, @color, @extra) {
	content: '';
	position: absolute;
	border: ( @size + @extra ) solid transparent;
	border-bottom: 0;
	border-top: ( @size + @extra ) solid @color;
	bottom: -@size;
	/* @noflip */
	left: @left;
}

.mwe-popups-icon {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	margin: 0;
	margin-top: -5px;
	height: 24px;
	width: 30px;
	border-radius: 2px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 24px 24px;

	&:hover {
		background-color: @colorGray14;
	}

	&:active {
		background-color: @colorGray12;
	}
}

.mwe-popups-settings-icon {
	.background-image-svg( "images/cog.svg", "images/cog.png" );
}

.mwe-popups-survey-icon {
	.background-image-svg( "images/horn-ltr.svg", "images/horn-ltr.png" );
}

.mwe-popups {
	position: absolute;
	z-index: 110;
	background: #fff;
	border: 1px solid #bbb;
	.box-shadow(0 0 10px rgba( 0, 0, 0, 0.2 ));
	padding: 0;
	display: none;
	font-size: 14px;
	line-height: 20px;
	min-width: 300px;

	> div {
		display: block;
		margin-top: -9px;
		padding-top: 9px;
		color: #000;
		text-decoration: none;

		> div {
			padding: 0;
			margin: 16px;
			padding-bottom: 48px;
		}

		div.mwe-popups-is-not-tall,
		div.mwe-popups-is-tall {
			margin: 0;
			height: 250px;
			width: 200px;
			padding: 0;
			background-size: cover;
			background-repeat: no-repeat;
			overflow: hidden;
			/* @noflip */
			float: right;
		}

		div.mwe-popups-is-not-tall {
			height: 200px;
			width: 300px;
		}

		> footer {
			padding: 16px;
			margin: 0;
			font-size: 10px;
			position: absolute;
			bottom: 0;
			/* @noflip */
			left: 0;

			> div.mwe-popups-timestamp-older {
				color: #555;
			}

			> div.mwe-popups-timestamp-recent {
				color: #00af89;
			}
		}
	}

	.mwe-popups-extract {
		margin: 0;
		padding: 16px;
		display: block;
		color: #000;
		text-decoration: none;

		&:hover {
			text-decoration: none;
		}
	}

	&.mwe-popups-is-tall {
		width: 450px;

		> div > a > svg {
			margin-bottom: -7px;
		}

		.mwe-popups-extract {
			width: 215px;
			height: 142px;
			overflow: hidden;
			/* @noflip */
			float: left;
		}

		footer {
			width: 215px;
		}
	}

	&.mwe-popups-is-not-tall {
		width: 300px;

		.mwe-popups-extract {
			max-height: 120px;
			overflow: hidden;
			margin-bottom: 47px;
			padding-bottom: 0;
		}

		footer {
			width: 270px;
		}
	}

	/* Triangles/Pokeys */
	&.mwe-popups-no-image-tri {
		&:after {
			.mwe-popups-border-triangle-top( 7px, 7px, #fff, 4px);
		}

		&:before {
			.mwe-popups-border-triangle-top( 8px, 10px, #bbb, 0px);
		}
	}

	&.flipped_x.mwe-popups-no-image-tri {
		&:after {
			/* @noflip */
			left: auto;
			/* @noflip */
			right: 7px;
		}

		&:before {
			/* @noflip */
			left: auto;
			/* @noflip */
			right: 10px;
		}
	}

	&.mwe-popups-image-tri {
		&:before {
			z-index: 111;
			.mwe-popups-border-triangle-top(9px, 9px, #bbb, 0px);
		}

		&:after {
			.mwe-popups-border-triangle-top(8px, 6px, #fff, 4px);
			z-index: 112;
		}

		&.flipped_x {
			&:before {
				z-index: 111;
				.mwe-popups-border-triangle-top(9px, 273px, #bbb, 0px);
			}

			&:after {
				.mwe-popups-border-triangle-top(8px, 269px, #fff, 4px);
				z-index: 112;
			}
		}

		.mwe-popups-extract {
			padding-top: 32px;
			margin-top: 190px;
		}

		> div > a > svg {
			margin-top: -8px;
			position: absolute;
			z-index: 113;
			/* @noflip */
			left: 0;
		}
	}

	&.flipped_x.mwe-popups-is-tall {
		min-height: 242px;

		&:before {
			z-index: 111;
			.mwe-popups-border-triangle-top(9px, 420px, #bbb, 0px);
		}

		> div > a > svg {
			margin: 0;
			margin-top: -8px;
			margin-bottom: -7px;
			position: absolute;
			z-index: 113;
			/* @noflip */
			right: 0;
		}
	}

	&.flipped_x_y {
		&:before {
			z-index: 111;
			.mwe-popups-border-triangle-bottom(9px, 272px, #bbb, 0px);
		}

		&:after {
			.mwe-popups-border-triangle-bottom(8px, 269px, #fff, 4px);
			z-index: 112;
		}

		&.mwe-popups-is-tall {
			min-height: 242px;

			&:after {
				z-index: 112;
				.mwe-popups-border-triangle-bottom(8px, 417px, #fff, 4px);
			}

			&:before {
				z-index: 111;
				.mwe-popups-border-triangle-bottom(9px, 420px, #bbb, 0px);
			}

			> div > a > svg {
				position: absolute;
				z-index: 113;
				margin: 0;
				margin-bottom: -9px;
				/* @noflip */
				right: 0;
			}
		}
	}

	&.flipped_y {
		&:after {
			.mwe-popups-border-triangle-bottom( 7px, 7px, #fff, 4px );
		}

		&:before {
			.mwe-popups-border-triangle-bottom( 8px, 10px, #bbb, 0px );
		}
	}
}