//-------------------------
// Animations - Loading
//-------------------------
@import '../../globals/scss/vars';

@mixin animation__loading--spin {
  // Animate the container
  animation-name: rotate;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;

  // Animate the stroke
  & svg circle {
    animation-name: init-stroke;
    animation-duration: 1000ms;
    animation-timing-function: $carbon--standard-easing;
  }
}

@mixin animation__loading--stop {
  // Animate the container
  animation: rotate-end-p1 700ms $carbon--ease-out forwards, rotate-end-p2 700ms $carbon--ease-out 700ms forwards;

  // Animate the stroke
  & svg circle {
    animation-name: stroke-end;
    animation-duration: 700ms;
    animation-timing-function: $carbon--ease-out;
    animation-delay: 700ms;
    animation-fill-mode: forwards;
  }
}