@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

/*
 * These two mixins create pointer triangles via cleverly placed borders, without any image.
 *   _____________
 *  |\           /|
 *  | \_________/ |
 *  | |         | |      ____
 *  | | Content | |     |\  /|
 *  | |_________| |     | \/ |        ____
 *  | /         \ |  >  | /\ |   >   | /\ |     >     /\
 *  |/___________\|     |/__\|       |/__\|          /__\
 *
 *   Element with    Set content     Remove     Make left+right
 *     4 borders       to 0x0      top border    transparent
 */
.mwe-popups-border-pointer-top( @size, @left, @color, @extra ) {
	content: '';
	position: absolute;
	border: ( @size + @extra ) @border-style-base @border-color-transparent;
	border-top: 0;
	border-bottom: ( @size + @extra ) @border-style-base @color;
	top: -@size;
	left: @left;
}

.mwe-popups-border-pointer-bottom( @size, @left, @color, @extra ) {
	content: '';
	position: absolute;
	border: ( @size + @extra ) @border-style-base @border-color-transparent;
	border-bottom: 0;
	border-top: ( @size + @extra ) @border-style-base @color;
	bottom: -@size;
	left: @left;
}

/* FIXME: Use Phuedx's approach to make this cleaner
   https://gist.github.com/phuedx/0639a279b6efb1a71474 */
@keyframes mwe-popups-fade-in-up {
	.mwe-popups-fade-in-up-frames;
}

@keyframes mwe-popups-fade-in-down {
	.mwe-popups-fade-in-down-frames;
}

@keyframes mwe-popups-fade-out-down {
	.mwe-popups-fade-out-down-frames;
}

@keyframes mwe-popups-fade-out-up {
	.mwe-popups-fade-out-up-frames;
}

.mwe-popups-fade-in-up-frames() {
	0% {
		opacity: 0;
		transform: translate( 0, 20px );
	}

	100% {
		opacity: 1;
		transform: translate( 0, 0 );
	}
}

.mwe-popups-fade-in-down-frames() {
	0% {
		opacity: 0;
		transform: translate( 0, -20px );
	}

	100% {
		opacity: 1;
		transform: translate( 0, 0 );
	}
}

.mwe-popups-fade-out-down-frames() {
	0% {
		opacity: 1;
		transform: translate( 0, 0 );
	}

	100% {
		opacity: 0;
		transform: translate( 0, 20px );
	}
}

.mwe-popups-fade-out-up-frames() {
	0% {
		opacity: 1;
		transform: translate( 0, 0 );
	}

	100% {
		opacity: 0;
		transform: translate( 0, -20px );
	}
}

.mwe-popups-fade-in-up {
	animation: mwe-popups-fade-in-up 0.2s ease forwards;
}

.mwe-popups-fade-in-down {
	animation: mwe-popups-fade-in-down 0.2s ease forwards;
}

.mwe-popups-fade-out-down {
	animation: mwe-popups-fade-out-down 0.2s ease forwards;
}

.mwe-popups-fade-out-up {
	animation: mwe-popups-fade-out-up 0.2s ease forwards;
}