$loading__gap: 40;
$loading--small__gap: 99;
$loading__size: 10.5rem;

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-end-p1 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-end-p2 {
  100% {
    transform: rotate(-360deg);
  }
}

/* Stroke animations */
@keyframes init-stroke {
  0% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: $loading__gap;
  }
}

@keyframes stroke-end {
  0% {
    stroke-dashoffset: $loading__gap;
  }
  100% {
    stroke-dashoffset: 240;
  }
}

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

  // Animate the stroke
  svg circle {
    animation-name: init-stroke;
    animation-duration: 10ms;
    animation-timing-function: ease;
  }
}

/// @access private
/// @group loading
@mixin animation__loading--stop {
  // Animate the container
  animation: rotate-end-p1 700ms ease-out forwards,
    rotate-end-p2 700ms ease-out 700ms forwards;

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

.loading {
  @include animation__loading--spin;
  width: $loading__size;
  height: $loading__size;
  display: inline-block;

  .loading__svg {
    fill: transparent;

    circle {
      stroke-width: 8;
      stroke-linecap: butt;
      stroke-dasharray: 240;
    }
  }

  .loading__stroke {
    stroke: $primary;
    stroke-dashoffset: $loading__gap;
  }

  &.loading--stop {
    @include animation__loading--stop;
  }

  &.loading--small {
    width: 2rem;
    height: 2rem;

    circle {
      stroke-width: 12;
    }

    .loading__svg {
      stroke: $primary;
    }

    .loading__stroke {
      stroke-dashoffset: $loading--small__gap;
    }
  }


  .loading__background {
    // stroke: $ui-03;
    stroke-dashoffset: 0;
  }

  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba($dark, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .3s ease;
    z-index: 1000;
  }

  .loading-overlay--stop {
    display: none;
  }
}