/*
************************************************************************************************************************************
************************************************************************************************************************************
########  ########   #######   ######   ########  ########  ######   ######  ########     ###    ########  
##     ## ##     ## ##     ## ##    ##  ##     ## ##       ##    ## ##    ## ##     ##   ## ##   ##     ## 
##     ## ##     ## ##     ## ##        ##     ## ##       ##       ##       ##     ##  ##   ##  ##     ## 
########  ########  ##     ## ##   #### ########  ######    ######   ######  ########  ##     ## ########  
##        ##   ##   ##     ## ##    ##  ##   ##   ##             ##       ## ##     ## ######### ##   ##   
##        ##    ##  ##     ## ##    ##  ##    ##  ##       ##    ## ##    ## ##     ## ##     ## ##    ##  
##        ##     ##  #######   ######   ##     ## ########  ######   ######  ########  ##     ## ##     ## 
************************************************************************************************************************************
************************************************************************************************************************************
*/

.progressbar{
	position: relative;
	z-index: 1;
	height: 104px;
	white-space: nowrap; /* each gauge is in percentage. So we can't do gauges + avatar without line wrap.*/
}
.progressbar--label{
	padding-bottom: 20px;
}
.progressbar--bubble{
	padding-top: 20px;
}
.progressbar::after{
	content: "";
	clear: both;
}
/* no preprocessor... so sorry about this : ****************************************************************************************/
.progressbar[data-stages="1"]{
	width: calc(100% - 36px); /* why ? because : (100% - (avatarWidth + avatarMargin) */
}
.progressbar[data-stages="2"]{
	width: calc(100% - 72px);
}
.progressbar[data-stages="3"]{
	width: calc(100% - 108px);
}
.progressbar[data-stages="4"]{
	width: calc(100% - 144px);
}
.progressbar[data-stages="5"]{
	width: calc(100% - 180px);
}
.progressbar[data-stages="6"]{
	width: calc(100% - 216px);
}

/***********************************************************************************************************************************/
/* COMMON **************************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar__gauge,
.progressbar__pix{
	position: relative;
	display: inline-block;
}

/***********************************************************************************************************************************/
/* GAUGE ***************************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar__gauge{
	position: relative;
	background-color: rgba(0, 0, 0, 0.3);
    margin: 0 -6px;
    border-width: 5px 0;
    border-style: solid;
    border-color: transparent;
    z-index: -1;
}
.body--ltr .progressbar__gauge:first-of-type,
.body--ltr .progressbar__gauge:first-of-type .progressbar__gauge__fill{
	border-width: 5px 0 5px 5px;
	border-radius: 15px 0 0 15px;
}
.body--rtl .progressbar__gauge:first-of-type,
.body--rtl .progressbar__gauge:first-of-type .progressbar__gauge__fill{
	border-width: 5px 5px 5px 0;
	border-radius: 0 15px 15px 0;
}
.progressbar__gauge::after{
	background-color: rgba(0, 0, 0, .2);
	bottom: 0;
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.2);
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.body--ltr .progressbar__gauge:first-of-type::after{
	border-radius: 15px 0 0 15px;
}
.body--rtl .progressbar__gauge:first-of-type::after{
	border-radius: 0 15px 15px 0;
}

/***********************************************************************************************************************************/
/* FILL ****************************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar__gauge__fill{
	position: relative;
	z-index: 2;
	display: block;
	height: 20px;
	overflow: hidden;
}
.js-progressbar__gauge__fill::after,
.js-progressbar__gauge__fill{
	position: absolute;
	content: "";
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.js-progressbar__gauge__fill{
	z-index: 1;
}
.js-progressbar__gauge__fill:not(.width-100){
	background-color: #FFF;
}
.js-progressbar__gauge__fill.width-100{
	background-color: #F6CE1D;
}
.js-progressbar__gauge__fill::after{
	background-size: 1rem 1rem;
	z-index: 2;
}
/** fallback for IE & Edge *********************************************************************************************************/
body:not(.body--edge):not(.body--ie11) .js-progressbar__gauge__fill.width-100,
body:not(.body--edge):not(.body--ie11) [class*="js-progressbar__preview"]{
	background-blend-mode: soft-light;
	background-image: linear-gradient(to top, #000000, #ffffff);
}
body:not(.body--edge):not(.body--ie11) .js-progressbar__gauge__fill.width-100::after,
body:not(.body--edge):not(.body--ie11) [class*="js-progressbar__preview"]::after{
	background-image: linear-gradient(-45deg,rgba(0,0,0,0.3) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 75%,transparent 75%,transparent);
	mix-blend-mode: soft-light;
}

/***********************************************************************************************************************************/
/* PREVIEW *************************************************************************************************************************/
/***********************************************************************************************************************************/

.js-progressbar__preview--positive.js-progressbar__gauge__fill{
	background-color: #7DD2FE;
}
.js-progressbar__preview--negative.js-progressbar__gauge__fill{
	background-color: #e25353;
}
[class*="js-progressbar__preview"]::before{
	border-color: #fff;
	border-style: solid;
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 4;
}
.body--ltr [class*="js-progressbar__preview"]::before{
	border-width: 3px 3px 3px 0;
}
.body--rtl [class*="js-progressbar__preview"]::before{
	border-width: 3px 0 3px 3px;
}

/***********************************************************************************************************************************/
/* PIX *****************************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar .pix__popover__title,
.progressbar .pix__popover__description {
	white-space: normal;
}
.progressbar__pix .pix{
	position: absolute;
}
/** size : XS **********************************************************************************************************************/
.progressbar__pix--xs{
	width: 48px;
	height: 48px;
}
.template-v5:not(.body--safari) .progressbar__pix--xs .pix{
	top: 15px;
}
.body--safari .progressbar__pix--xs .pix{
	top: 8px;
}
/** size : S ***********************************************************************************************************************/
.progressbar__pix--s{
	width: 64px;
	height: 64px;
}
.template-v5:not(.body--safari) .progressbar__pix--s .pix{
	top: 22px;
}
.body--safari .progressbar__pix--s .pix{
	top: 16px;
}

/***********************************************************************************************************************************/
/* LABEL ***************************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar__pix__label{
	bottom: 50px;
	position: absolute;
	min-width: 32px;
	text-align: center;
	font-weight: bold;
	font-size: 13px;
	pointer-events: none;
	width: 200px;
	color: #3D251B;
	line-height: 1.5;
	z-index: -2;
}
.progressbar--white .progressbar__pix__label {
	color: #fff;
}
.progressbar__pix--xs .progressbar__pix__label {
	left: -76px; /* why ? because : (labelWidth - avatarWidth) / 2) */
}
.progressbar__pix--s .progressbar__pix__label {
	left: -68px; /* why ? because : (labelWidth - avatarWidth) / 2) */
}
.progressbar__pix .pix::after,
.progressbar__pix .pix__quantity__value{
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/***********************************************************************************************************************************/
/* CONTENT ***************************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar__pix__content {
	bottom: -70px;
	position: absolute;
	min-width: 32px;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
}

/***********************************************************************************************************************************/
/* BUBBLE **************************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar__gauge__bubble{
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
    position: absolute;
    bottom: 42px;
    display: table-cell;
    width: 100%;
    margin-left: -50%;
	opacity: 0;
	transition: opacity 0.15s;
    text-align: center;
}
.progressbar:hover .progressbar__gauge__bubble{
	opacity: 1;
}
.progressbar__gauge__bubble .align-center{
	background: #fff;
	color: #3D251B;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	padding: 8px;
	white-space: nowrap;
    border-radius: 4px;
}
.progressbar__gauge__bubble::after{
	border-width: 0 0 8px 8px;
    border-style: solid;
    border-color: transparent #fff transparent #fff;
    bottom: -3px;
    content: "";
    height: 0;
    left: calc(50% - 4px); /* why ? because (fullWitdh / 2) - arrowWitdh */
    position: absolute;
    width: 0;
    display: block;
    transform: scale(-1) rotate(45deg);
}

.progressbar__gauge__bubble .align-center,
.progressbar__gauge__bubble::after{
	animation: popBubble .7s 1 0s;
}

@keyframes popBubble{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

/***********************************************************************************************************************************/
/* ANIMATION ***********************************************************************************************************************/
/***********************************************************************************************************************************/

.progressbar--animation.js-progressbar__gauge__fill::after,
.progressbar--animation.js-progressbar__gauge__fill{
	transition:width 1s;
	-o-transition:width 1s;
	-ms-transition:width 1s;
	-moz-transition:width 1s;
	-webkit-transition:width 1s;
}
.progressbar--animation.progressbar__gauge__bubble{
	transition:left 1s;
	-o-transition:left 1s;
	-ms-transition:left 1s;
	-moz-transition:left 1s;
	-webkit-transition:left 1s;
}