/* Optional presentation effects for Total Donations campaign progress bars. */
.migla-donation-progress__track{
  position:relative;
}

.migla-donation-progress__track.is-striped > span{
  background-color:var(--tdon-progress-fill,var(--migla-primary,#176b57));
  background-image:repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.22) 0,
    rgba(255,255,255,.22) 8px,
    rgba(255,255,255,0) 8px,
    rgba(255,255,255,0) 16px
  );
}

.migla-donation-progress__track.has-label::before{
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  max-width:calc(100% - .5rem);
  padding:.08rem .42rem;
  overflow:hidden;
  border-radius:3px;
  background:rgba(0,0,0,.2);
  color:#fff;
  content:attr(data-tdon-progress-label);
  font-size:clamp(.68rem,.78em,.82rem);
  font-weight:750;
  line-height:1.25;
  text-overflow:ellipsis;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
  transform:translate(-50%,-50%);
  white-space:nowrap;
  pointer-events:none;
}

.migla-donation-progress__track.is-pulse > span{
  position:relative;
  overflow:hidden;
}

.migla-donation-progress__track.is-pulse > span::after{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  content:"";
  transform:translateX(-120%);
  animation:tdon-progress-pulse 2.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes tdon-progress-pulse{
  0%,18%{transform:translateX(-120%)}
  72%,100%{transform:translateX(120%)}
}

@media (prefers-reduced-motion:reduce){
  .migla-donation-progress__track.is-pulse > span::after{
    display:none;
    animation:none;
  }
}