/**
 * ==============================================
 * Dot Carousel
 * ==============================================
 */

@use './variables';
@use './mixins';

$left-pos: -9999px;
$x1: - $left-pos - variables.$dot-spacing;
$x2: - $left-pos;
$x3: - $left-pos + variables.$dot-spacing;

.dot-carousel {
  position: relative;
  left: $left-pos;

  @include mixins.dot;

  box-shadow:
    $x1 0 0 0 variables.$dot-before-color,
    $x2 0 0 0 variables.$dot-color,
    $x3 0 0 0 variables.$dot-after-color;
  animation: dot-carousel 1.5s infinite linear;
}

@keyframes dot-carousel {
  0% {
    box-shadow:
      $x1 0 0 -1px variables.$dot-before-color,
      $x2 0 0 1px variables.$dot-color,
      $x3 0 0 -1px variables.$dot-after-color;
  }

  50% {
    box-shadow:
      $x3 0 0 -1px variables.$dot-before-color,
      $x1 0 0 -1px variables.$dot-color,
      $x2 0 0 1px variables.$dot-after-color;
  }

  100% {
    box-shadow:
      $x2 0 0 1px variables.$dot-before-color,
      $x3 0 0 -1px variables.$dot-color,
      $x1 0 0 -1px variables.$dot-after-color;
  }
}