.rcl-animate {
  animation-fill-mode: backwards; /* automatically apply 0% before starts*/
}

.rck-slideInLeft {
  animation-duration: 1s;
  //   animation-delay: 0.5s;
  animation-name: rckSlideInLeft;
  animation-fill-mode: backwards; /* automatically apply 0% before starts*/
}

.rck-moveInLeft {
  animation: moveInLeft 1s ease-out;
  animation-fill-mode: backwards; /* automatically apply 0% before starts*/
}

.rck-hide {
  opacity: 0;
}

@keyframes rckSlideInLeft {
  0%,
  100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }

  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

// @mixin progress-bar-keyframes($name, $width) {
//   @keyframes #{$name} {
//     0%,
//     100% {
//       transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
//     }

//     0% {
//       width: 0;
//     }

//     100% {
//       width: $width;
//     }
//   }
// }