@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;transition-duration: $transition-duration;



  transition-timing-function: $transition-timing;
}
@mixin boxsizing() {
  -moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}
@mixin centerit(){

  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}




$transition-property: opacity;
$transition-duration: 1s;
$transition-timing: ease-out;

.dzs-progress-bar{
  position: relative;

  font-weight: 300;
  opacity: 0;
  line-height: 1;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
  @include boxsizing();
  *{
    $transition-property: none;
    $transition-duration: 0s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
    @include boxsizing();
  }
  div.progress-bars-item{
    width: 0%;
    height: 50px;
  }

  div.progress-bars-item--text{
    line-height: 1.1;
  }
}
.dzs-progress-bar.started{
  opacity: 1;
}





.padding5 {
  padding: 3px;
}
.small-arrow-bot:after{
  content:"";
  width: 0;
  height: 0;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #111;

  position: absolute;
  top: 100%;
  margin-left: -3px;
  left: 50%;
}

.center-it-v{
  top:50%;
  transform: translate3d(0,-50%,0);
}

.center-it{
  @include centerit();
}








.repeater-item{
  display: inline-flex;
  color: #ffffff;;
  width: 20px;
  height: 20px;

  //padding: 3px;

  transition: transform 0.3s ease-out;

  position: relative;

  height: auto;

  justify-content: center;

  align-items: center;
  align-content: center;


  text-align: center;

  .repeater-item--inner{

    width: 100%;


    //position: absolute;
    //top:50%; left:50%;






    //transform: translate3d(-50%,-50%,0) scale(0.5) rotate(0);

    .real-icon {
      display: inline-block;
      opacity: 0;
      transform: scale(1) rotate(0deg);
      transition: all 300ms ease-out;
    }

    /*transition: transform 0.3s ease-out;*/


    display: inline-block;
    transition: all 300ms ease-out;

  }

  &.active{
    .repeater-item--inner{
      //transform:  scale(0.9) rotate(90deg);
      //transform: translate3d(-50%,-50%,0) scale(0.9) rotate(90deg);

      .real-icon{

        opacity: 1;
        transform:  scale(1) rotate(0deg);
      }
    }
  }
}


.the-text-transition-con{
  display: inline-block;
}

.progress-bar-item--repeater{
  //white-space: nowrap;

  &.repeater-transition-rotate{
    .repeater-item{


      .repeater-item--inner{
        .real-icon {
          opacity: 1;

          transform: scale(0.5) rotate(90deg) ;
          // translate3d(-50%,-50%,0)
          transition-timing-function: cubic-bezier(0.000, 1.650, 0.500, 1.650);
        }
      }

      &.active{

        .repeater-item--inner{


          .real-icon {
            transform: scale(0.9) rotate(0deg);

            // translate3d(-50%,-50%,0)
          }
        }
      }
    }
  }

  &.repeater-transition-colors{
    .repeater-item{


      .repeater-item--inner{
        opacity: 1;

        transform:  scale(1) ;
      }

      &.active{

        .repeater-item--inner{
          opacity: 1;

          transform:  scale(1) ;
        }
      }
    }
  }


  i.progress-icon-con{
    display: inline-block;
    width: auto;
    height: auto;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;


    line-height: 1;



    $transition-property: background,color;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    &.rounded{
      border-radius: 50%;
    }

    &.dims-set{

      position: relative;


      >i{
        //@include centerit();
      }
    }
  }
}

.repeater-item > *{



}

.flex-con{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.flex-fixed{
  flex: 0 0 auto;
  font-size: 13px;
}

.flex-all{
  flex: 300;

  position: relative;
  min-height: 1px;
}

.dzsprg-digit-con {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  align-content: center;
  align-items: center;
  line-height: 1;


  &:not(.settled){

    font-size:0;
  }



  $transition-property: font-size;
  $transition-duration: 0.3s;
  $transition-timing: ease-in;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);

  .dzsprg-digit {

    position: absolute;
    opacity: 0;

    $transition-property: opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    &.all-new {

      opacity: 1;
    }
    &.transitioning-in {

      opacity: 1;
    }
    &.transitioning-out {

      opacity: 0;
    }

    &.placeholder{

      position: relative;
      top:0;
    }
  }
}
.progress-bar-item--rect{
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.dzs-progress-bar{


  .dzsprg-digit:not(.ceva):not(.alceva){

    &.placeholder{

      position: relative;
      top:0;
    }
  }

  &.transition-text-slideup{

    .dzsprg-digit {

      position: absolute;
      top:60%;

      $transition-property: opacity,top;
      $transition-duration: 0.3s;
      $transition-timing: ease-in;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);

      &.all-new {

        top:0;
      }
      &.transitioning-in {

        top:0;
      }
      &.transitioning-out {

        top:-60%;
      }

    }
  }
}

.dzs-progress-bar{
  &.theme-light{


    .text-progress-fill--text{
      text-shadow: 0px 0 1px rgba(255,255,255,0.1), 0 -1px  rgba(255,255,255,0.1),-1px -1px  rgba(255,255,255,0.1),0px 1px  rgba(255,255,255,0.1);;


    }
  }

  &.transition-init-slide-left-x2,&.transition-init-slide-left,&.transition-init-slide-right,&.transition-init-slide-right-x2{

    transform: translate3d(200px,0px,0) scale(0.6);
    opacity: 0;

    $transition-property: opacity,transform;
    $transition-duration: 0.5s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

  }

  &.transition-init-slide-left{

    transform: translate3d(100px,0px,0) scale(0.85);
  }

  &.transition-init-slide-right{

    transform: translate3d(-100px,0px,0) scale(0.85);
  }

  &.transition-init-slide-right-x2{

    transform: translate3d(-200px,0px,0) scale(0.6);
  }
  &.transition-init-slide-left-x2.started,&.transition-init-slide-left.started,&.transition-init-slide-right-x2.started,&.transition-init-slide-right.started{

    opacity: 1;
    transform: translate3d(0,0px,0) scale(1);
  }
}

/* only js animations please */
.progress-bar-item{
  transition-property: none!important;
}
.text-progress-fill{
  position: relative;
  display: inline-block!important;
  width: auto!important;

  //overflow: hidden;
  max-width: 110%;
  -webkit-font-smoothing: antialiased;

  svg{

    //dominant-baseline: start;
  }

  text{
    fill: none;
    stroke: #414250;
    stroke-width:1px;
    // stroke-dasharray: 2,2;
    stroke-linejoin: round;

    dominant-baseline: hanging;
  }

  .text-progress-fill--text{
    position: relative; top:0; left:0; white-space: nowrap;


    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    //color: #ffffff;
    color: transparent;
    text-shadow: 0px 0 1px rgba(0,0,0,0.1), 0 -1px  rgba(0,0,0,0.1),-1px -1px  rgba(0,0,0,0.1),0px 1px  rgba(0,0,0,0.1);
    //text-shadow: 0px 0 1px rgba(255,255,255,0.1), 0 -1px  rgba(255,255,255,0.1),-1px -1px  rgba(255,255,255,0.1),0px 1px  rgba(255,255,255,0.1);


    //text-shadow: 0px 0 1px rgba(0,0,0,0.5);

  }
  .text-progress-fill--inner{
    position: absolute; left:0; white-space: nowrap; width:0%; overflow:hidden;

    //transition: 0.3s width ease-out;
    color: inherit;;

    top:0;
    //top:-5%;
    //top:-15px;
    height: 120%;

    text-overflow: clip;

    text-align: left;

  }
}