/*----------------------------------------------------------------------------*\
	PROGRESS SHORTCODE
\*----------------------------------------------------------------------------*/
.mpc-progress {
	margin-bottom: 1.5em;
}

.mpc-progress__wrap,
.mpc-progress__bar {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.mpc-progress__title {
	display: block;
	margin: 0 !important;
}

.mpc-progress__value {
	display: block;
	padding-left: .5em;
	white-space: nowrap;
}

.mpc-progress__box {
	position: relative;
	width: 100%;
	height: 100%;
}

.mpc-progress__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	overflow: hidden;

	-webkit-transition: width 1.5s, height 1.5s;
	transition: width 1.5s, height 1.5s;
}

.mpc-vertical--center {
	.mpc-progress__info {
		display: table;
		width: 100%;
		min-width: 0;

		-webkit-transition: all 1.5s;
		transition: all 1.5s;
	}

	.mpc-progress__title,
	.mpc-progress__value {
		display: table-cell;
		vertical-align: middle;
	}

	.mpc-progress__value {
		width: 1px;
	}
}

.mpc-sticky-value {
	.mpc-progress__info {
		width: auto;
	}
}

// Horizontal bar
.mpc-progress.mpc-style--style_1,
.mpc-progress.mpc-style--style_2,
.mpc-progress.mpc-style--style_6 {
	.mpc-progress__bar {
		height: 100%;
	}
}

.mpc-progress.mpc-style--style_2 {
	.mpc-progress__info {
		position: relative;
		z-index: 1;
	}
}

// Vertical bar
.mpc-progress.mpc-style--style_3,
.mpc-progress.mpc-style--style_4,
.mpc-progress.mpc-style--style_7 {
	.mpc-progress__bar {
		width: 100%;
	}
}

.mpc-progress.mpc-style--style_7 {
	.mpc-progress__value {
		position: absolute;
		top: 50%;
		left: 50%;
		padding-left: 0;
		transform: translateX(-50%) translateY(-50%);
	}
}

.mpc-progress.mpc-style--style_4 {
	.mpc-progress__value {
		display: block;
		padding-left: 0;
	}
}

// Icon bar
.mpc-progress.mpc-style--style_5,
.mpc-progress.mpc-style--style_8 {
	.mpc-progress__box:after {
		content: '';
		display: block;
		clear: both;
	}

	.mpc-progress__icon-box {
		float: left;
		position: relative;
		width: 10%;
		border: 0 solid transparent;

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

		&:before {
			content: '';
			display: block;
			padding-top: 100%;
		}

		&.mpc-filled {
			.mpc-layer--back {
				opacity: 0;
			}
			.mpc-layer--front {
				opacity: 1;
			}
		}
	}

	.mpc-progress__icon {
		text-align: center;
		vertical-align: middle;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		-webkit-transition: opacity .25s;
		transition: opacity .25s;

		&.mpc-layer--back {
			opacity: 1;
		}
		&.mpc-layer--front {
			opacity: 0;
		}

		&:before {
			vertical-align: middle;
		}
		&:after {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}
	}
	.mpc-progress__bar {
		height: 100%;
	}
}