/*----------------------------------------------------------------------------*\
	TOOLTIP SHORTCODE
\*----------------------------------------------------------------------------*/
.mpc-tooltip {
	position: absolute;
	display: block;
	white-space: nowrap;
	z-index: 100000;
	visibility: hidden;
	opacity: 0 !important;
	pointer-events: none;

	-webkit-transition: all .25s !important;
	transition: all .25s !important;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	* {
		visibility: inherit;
	}

	//&:after {
	.mpc-arrow {
		position: absolute;
		border-color: inherit;
		border-style: solid;
		border-width: 7px;
	}
	&.mpc-no-arrow .mpc-arrow {
		display: none;
	}

	&.mpc-loaded {
		max-width: 300px;

		&.mpc-wide {
			max-width: 500px;
		}
	}

	&.mpc-position--top {
		top: 0;
		left: 50%;
		transform: translateX(-50%) translateY(-100%);
		margin-top: -1em;

		.mpc-arrow {
			bottom: -14px;
			left: 50%;
			margin-left: -7px;
			border-right-color: transparent !important;
			border-bottom-color: transparent !important;
			border-left-color: transparent !important;
		}
	}
	&.mpc-position--right {
		top: 50%;
		right: 0;
		transform: translateX(100%) translateY(-50%);
		margin-right: -1em;

		.mpc-arrow {
			top: 50%;
			left: -14px;
			margin-top: -7px;
			border-top-color: transparent !important;
			border-bottom-color: transparent !important;
			border-left-color: transparent !important;
		}
	}
	&.mpc-position--bottom {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) translateY(100%);
		margin-bottom: -1em;

		.mpc-arrow {
			top: -14px;
			left: 50%;
			margin-left: -7px;
			border-top-color: transparent !important;
			border-right-color: transparent !important;
			border-left-color: transparent !important;
		}
	}
	&.mpc-position--left {
		top: 50%;
		left: 0;
		transform: translateX(-100%) translateY(-50%);
		margin-left: -1em;

		.mpc-arrow {
			top: 50%;
			right: -14px;
			margin-top: -7px;
			border-top-color: transparent !important;
			border-right-color: transparent !important;
			border-bottom-color: transparent !important;
		}
	}

	&.mpc-wrap-content {
		white-space: normal;
		word-break: break-word;
		word-wrap: break-word;
		width: 300px;

		&.mpc-wide {
			width: 500px;
		}

		img {
			max-width: 100%;
		}
	}

	&.mpc-can-hover {
		pointer-events: all;
	}

	&.mpc-triggered.mpc-inited {
		visibility: visible;
		opacity: 1 !important;

		transition-delay: .1s;
	}

	.mpc-embed-wrap {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;

		> iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	h1, h2, h3, h4, h5, h6 {
		margin-top: 1em;
		margin-bottom: 1em;

		&:first-child {
			margin-top: 1em;
		}
	}
}

.mpc-tooltip.mpc-effect--slide {
	&.mpc-position--top {
		top: 2em;
	}
	&.mpc-position--right {
		right: 2em;
	}
	&.mpc-position--bottom {
		bottom: 2em;
	}
	&.mpc-position--left {
		left: 2em;
	}
}

.mpc-tooltip.mpc-effect--push {
	&.mpc-position--top {
		top: -2em;
	}
	&.mpc-position--right {
		right: -2em;
	}
	&.mpc-position--bottom {
		bottom: -2em;
	}
	&.mpc-position--left {
		left: -2em;
	}
}

.mpc-tooltip {
	.mpc-tooltip-target:hover + &.mpc-trigger--hover,
	&.mpc-can-hover:hover {
		&.mpc-position--top {
			top: 0;
		}
		&.mpc-position--right {
			right: 0;
		}
		&.mpc-position--bottom {
			bottom: 0;
		}
		&.mpc-position--left {
			left: 0;
		}
	}
}

.mpc-tooltip.mpc-triggered {
	&.mpc-effect--push {
		&.mpc-position--top {
			top: -.5em;
		}
		&.mpc-position--right {
			right: -.5em;
		}
		&.mpc-position--bottom {
			bottom: -.5em;
		}
		&.mpc-position--left {
			left: -.5em;
		}
	}

	&.mpc-effect--slide {
		&.mpc-position--top {
			top: .5em;
		}
		&.mpc-position--right {
			right: .5em;
		}
		&.mpc-position--bottom {
			bottom: .5em;
		}
		&.mpc-position--left {
			left: .5em;
		}
	}
}

.mpc-tooltip-target:hover + .mpc-tooltip {
	&.mpc-position--top {
		top: 0 !important;
	}
	&.mpc-position--right {
		right: 0 !important;
	}
	&.mpc-position--bottom {
		bottom: 0 !important;
	}
	&.mpc-position--left {
		left: 0 !important;
	}
}

.mpc-tooltip-target:hover + .mpc-tooltip.mpc-trigger--hover,
.mpc-tooltip.mpc-trigger--hover.mpc-can-hover:hover {
	visibility: visible !important;
	opacity: 1 !important;

	transition-delay: .1s;
}

.mpc-tooltip-wrap:hover .mpc-tooltip {
	z-index: 100001;
}

.mpc-tooltip-wrap {
	position: relative;
	display: inline-block;
}