Анимации @extend класса отменяют друг друга

Question

Я пытаюсь создать загрузочную анимацию, где внешнее кольцо вращается вправо, а внутреннее - слева.

Это весь код CSS:

  html {
   height: 100%;
  }

  .loadingCircle {
    width: 100px;
    height: 100px;
    border: solid 5px transparent;
    border-top: solid 5px blue;
    border-radius: 50%;

    transform-origin: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.loadingCircleOuter {
  @extend .loadingCircle;

  animation: circleSpinOuter 2s linear infinite;
}

.loadingCircleInner {
  @extend .loadingCircle;

  height: 80px;
  width: 80px;

  animation: circleSpinInner 2s linear infinite;
}

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

@keyframes circleSpinInner {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

В результате этого внутренний круг вообще не вращается.Если я закомментирую анимацию внешнего круга, внутренний вращается должным образом, и достаточно, чтобы внутренний круг вращался вдвое быстрее, чтобы отменить вращение внешней анимации и добавить к нему правильный вращение влево (как ни странно,только к нему, а не к внешнему, тот все еще правильно вращается вправо).

Понятно, что внешняя анимация применяется к обоим кругам, но почему?

Надеюсьне понимаю, почему он так себя ведет, изменение цвета внешнего круга не применяет изменение к обоим кругам, почему это изменяет анимацию для обоих?

Я делаю что-то ужасно неправильно?