$background:white;
$containerSize:600px; //Will affect the contents
$circleSize:50px;     //The smaller ones. Was: 30 before
$circleComponents:10;
$subComponents:10; //Two circles for every sub component
$animationDelayIncrease:.08;



@for $a from 1 through $circleComponents {
  .circle-component:nth-of-type(#{$a}) {
    transform:scale(.1*($circleComponents - $a)+.1); //Change this with $a later
    	@for $b from 1 through $subComponents {
        .circle-sub-component:nth-of-type(#{$b}) {
           $angle:((360/$subComponents)*$b);
      	   transform:rotate($angle+deg);
          @for $c from 1 through $subComponents {
            .circle:nth-of-type(#{$c}) {
              animation-delay:$animationDelayIncrease*($a+$b+$c)+s;
            }
        	}
        }
      }
  }
}



/* General stuff which doesn't need to be looped */
body {
  background:$background;
}

.container:hover .container,
.container:hover .circle-component,
.container:hover .circle-sub-component {
    box-shadow:0 0 1px rgba(0,0,0,.5);
}

.container {
  position:relative;
  //box-shadow:0 0 1px black; //Remove later
  margin:20px auto; //Make dynamic
  width:$containerSize;
  height:$containerSize;
}

.circle-component {
  position:absolute;
  border-radius:100%;
  //box-shadow:0 0 1px black; //Remove later
  width:$containerSize;
  height:$containerSize;
}

.circle-sub-component {
  position:absolute;
  top:($containerSize/2)-$circleSize/2; //60 should be dynamic
  width:100%;
  height:$circleSize;
}

.circle-sub-component .circle {
  position:relative;
  width:$circleSize;
  height:$circleSize;
  //background:rgba(255,0,0,.1);
  border-top:5px solid red;
  float:left;
  animation:circe-animation 2s linear infinite;
}

.circle-sub-component .circle:nth-of-type(2) {
  float:right;
}

/* Animations */
/*
@keyframes circe-animation {
  0%   { transform:rotate(0deg)   rotateX(0deg) rotateY(0deg) scale(1); }
  50%  { transform:rotate(180deg) rotateX(0deg) rotateY(0deg) scale(1.5); }
  100% { transform:rotate(360deg) rotateX(0deg) rotateY(0deg) scale(1); }
}
*/


@keyframes circe-animation {
  0%   { transform:rotate(0deg)   rotateX(0deg) rotateY(0deg) scale(1); }
  50%  { transform:rotate(180deg) rotateX(0deg) rotateY(360deg) scale(-1.5); }
  100% { transform:rotate(360deg) rotateX(0deg) rotateY(0deg) scale(1); }
}