@import '../styles/variables.css';

.linear {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--silver) none repeat scroll 0% 0%;
  height: .4rem;
}
.linear.indeterminate .value {
  transform-origin: center center;
  animation: linear-indeterminate-bar 1s linear infinite;
}

.buffer {
  
}

.value, .buffer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /*$animation-curve-default;*/
  transform: scaleX(0);
  transform-origin: left center;
}

.value {
  composes: bg-primary from "../styles.css"
}
.buffer {
  background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)),
    linear-gradient(to right, var(--primary), var(--primary));

}

.circular {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  transform: rotate(-90deg);
}
.circular.indeterminate .circle {
  animation: circular-indeterminate-bar-rotate 2s linear infinite;
}
.circular.indeterminate .path {
  animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 1.25, 250;
  stroke-dashoffset: 0;
}
.circular.multicolor .path {
  animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
  colors (1.5s * 4) ease-in-out infinite;
}

.circle {
  width: 100%;
  height: 100%;
}

.path {
  transition: stroke-dasharray .35s cubic-bezier(0.4, 0, 0.2, 1);
  fill: none;
  stroke-dasharray: 0, 500;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-miterlimit: 20;
  stroke-width: 4;
  stroke: var(--primary);
}

.indeterminate {

}

.determinate {
  
}

@keyframes linear-indeterminate-bar {
  0% {
    transform: translate(-50%) scaleX(0);
  }

  50% {
    transform: translate(-0%) scaleX(.3);
  }

  100% {
    transform: translate(50%) scaleX(0);
  }
}

@keyframes circular-indeterminate-bar-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes circular-indeterminate-bar-dash {
  0% {
    stroke-dasharray: 1.25, 250;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 111.25, 250;
    stroke-dashoffset: -43.75;
  }

  100% {
    stroke-dasharray: 111.25, 250;
    stroke-dashoffset: -155;
  }
}

@keyframes colors {
  0% {
    stroke: #4285f4;
  }

  25% {
    stroke: #de3e35;
  }

  50% {
    stroke: #f7c223;
  }

  75% {
    stroke: #1b9a59;
  }

  100% {
    stroke: #4285f4;
  }
}