// Variables ---------------------------------------------------
$size: 12px;
$gap: 0;
$radius: 50%;
$duration: 2000ms;
$moveInTiming: cubic-bezier(0.5, 0, 0.75, 0);
$moveOutTiming: cubic-bezier(0.25, 1, 0.5, 1);
$darkBackground: #050a0e;
$lightBackground: #fff;
$rotate: 45deg;
// -------------------------------------------------------------

.depicter-dot-swing {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   span {
      display: inline-block;
      width: $size;
      height: $size;
      margin-right: $gap;
      border-radius: $radius;

      &:last-of-type {
         margin-right: 0;
      }
   }

   &.depicter-loading-dark {
      span {
         background-color: $darkBackground;
      }
   }

   &.depicter-loading-light {
      span {
         background-color: $lightBackground;
      }
   }

   span {
      transform-origin: center -10px;
      will-change: transform;

      &:first-of-type {
         animation: firstDotSwing $duration infinite;
      }

      &:last-of-type {
         animation: lastDotSwing $duration infinite;
      }
   }

   @keyframes firstDotSwing {
      0% {
         transform: rotate($rotate);
         animation-timing-function: $moveInTiming;
      }
      23.3% {
         transform: rotate(0);
         animation-timing-function: linear;
      }
      74.1% {
         transform: rotate(0);
         animation-timing-function: $moveOutTiming;
      }
      100% {
         transform: rotate($rotate);
      }
   }

   @keyframes lastDotSwing {
      0% {
         transform: rotate(0);
         animation-timing-function: linear;
      }
      23.3% {
         transform: rotate(0);
         animation-timing-function: $moveOutTiming;
      }
      49.1% {
         transform: rotate(-$rotate);
         animation-timing-function: $moveInTiming;
      }
      74.1%,
      100% {
         transform: rotate(0);
         animation-timing-function: linear;
      }
   }
}