/*----------------------------------------------------------------------------*\
	ICON SHORTCODE
\*----------------------------------------------------------------------------*/
.mpc-icon {
	display: inline-block;
	text-align: center;
	line-height: 1em;
	vertical-align: middle;
	max-width: 100%;
	overflow: hidden;
	z-index: 1;
	transform: translate3d( 0, 0, 0 );

	&-part {
		font-style: normal;
	}
}

.mpc-icon-wrap {
	position: relative;
	overflow: hidden;

	//transform: translate3d(0, 0, 0);
}

//.mpc-icon.mpc-icon--image .mpc-icon-wrap {
	//border-radius: inherit;
//}

.mpc-icon .mpc-regular,
.mpc-icon .mpc-hover {
	position: relative;
	display: block;
	width: auto;
	top: 0;
	left: 0;

	img {
		display: block;
		max-width: 100%;
	}
}
.mpc-icon:not(.mpc-icon--image) .mpc-regular,
.mpc-icon:not(.mpc-icon--image) .mpc-hover {
	width: 1.35em;
	height: 1.35em;
	line-height: 1.35em;
}
.mpc-icon.mpc-icon--character .mpc-regular,
.mpc-icon.mpc-icon--character .mpc-hover {
	width: auto;
	min-width: 1.35em;
}
.mpc-icon.mpc-effect-none .mpc-regular,
.mpc-icon.mpc-effect-none .mpc-hover {
	-webkit-transition: none;
	transition: none;
}

.mpc-icon .mpc-hover {
	position: absolute;
	width: 100%;
	height: 100%;
}

.mpc-icon-hover.mpc-effect-slide-up {
	.mpc-hover { transform: translate( 0, -100% ); }
	.mpc-regular { transform: translate( 0, 0 ); }

	&:hover,
	.mpc-parent-hover:hover &,
	.mpc-active & {
		.mpc-hover { transform: translate( 0, 0 ); }
		.mpc-regular { transform: translate( 0, 100% ); }
	}
}
.mpc-icon-hover.mpc-effect-slide-down {
	.mpc-hover { transform: translate( 0, 100% ); }
	.mpc-regular { transform: translate( 0, 0 ); }

	&:hover,
	.mpc-parent-hover:hover &,
	.mpc-active & {
		.mpc-hover { transform: translate( 0%, 0 ); }
		.mpc-regular { transform: translate( 0, -100% ); }
	}
}
.mpc-icon-hover.mpc-effect-slide-left {
	.mpc-hover { transform: translate( -100%, 0 ); }
	.mpc-regular { transform: translate( 0, 0 ); }

	&:hover,
	.mpc-parent-hover:hover &,
	.mpc-active & {
		.mpc-hover { transform: translate( 0, 0 ); }
		.mpc-regular { transform: translate( 100%, 0 ); }
	}
}
.mpc-icon-hover.mpc-effect-slide-right {
	.mpc-hover { transform: translate( 100%, 0 ); }
	.mpc-regular { transform: translate( 0, 0 ); }

	&:hover,
	.mpc-parent-hover:hover &,
	.mpc-active & {
		.mpc-hover { transform: translate( 0, 0 ); }
		.mpc-regular { transform: translate( -100%, 0 ); }
	}
}
.mpc-icon-hover.mpc-effect-none,
.mpc-icon-hover.mpc-effect-fade {
	.mpc-hover { opacity: 0; }
	.mpc-regular { opacity: 1; }

	&:hover,
	.mpc-parent-hover:hover &,
	.mpc-active & {
		.mpc-hover { opacity: 1; }
		.mpc-regular { opacity: 0; }
	}
}
