@mixin marching-ants-v2-init($ant-size, $ant-width, $speed, $id) {
  background-size: $ant-size $ant-width, $ant-size $ant-width,
    $ant-width $ant-size, $ant-width $ant-size;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  animation: marching-ants-#{$id} $speed;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  &.marching {
    animation-play-state: running;
  }
  &.reverse {
    animation-direction: reverse;
  }
}
@mixin marching-ants-v2-color($a, $b) {
  background-image: linear-gradient(to right, $a 50%, $b 50%),
    linear-gradient(to right, $a 50%, $b 50%),
    linear-gradient(to bottom, $a 50%, $b 50%),
    linear-gradient(to bottom, $a 50%, $b 50%);
}

@mixin marching-ants-v2-animation($ant-size, $id) {
  @keyframes marching-ants-#{$id} {
    0% {
      background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
    100% {
      background-position: 2 * $ant-size 0, -2 * $ant-size 100%,
        0 -2 * $ant-size, 100% 2 * $ant-size;
    }
  }
}
