$color-blue: #0085c1;
$color-teal: #3Fbfbb;
$color-green: #19ac51;
$color-yellow: #ffc930;
$color-orange: #ff8a50;
$color-red: #f05e5e; 
$color-purple: #a85aa6;

$colors: $color-blue $color-teal $color-green $color-yellow $color-orange $color-red $color-purple;
$colorNames: "blue" "teal" "green" "yellow" "orange" "red" "purple";


@each $color in $colors {
  $index: index($colors, $color);
  $class: nth($colorNames, $index);
  .#{$class}, .#{$class}:before {
    background: $color;
  }
}

$size: 100px;
$halfSize: $size / 2;

.circles {
  clear: both;
}

//Basic shape
.circle {
  width: $size;
  height: $size;
  position: relative;
  float: left;
  margin: 10px;
  &.circle-small {
    transform: scale(0.5);
    margin: -10px;
  }
  &.circle-big {
    transform: scale(1.5);
    margin: 40px;
  }
}

.color {
  position: absolute;
  width: $halfSize;
  height: $halfSize;
  transform-origin: 100% 100%;
  z-index: 1;
  border-radius: $size 0 0 0;
}

//Two colors
.duo-color .color {
  border-radius: $size $size 0 0;
  width: 100%;
  transform-origin: 50% 100%;
  &:nth-child(1) {
    transform: rotate(-90deg);
  }
  &:nth-child(2) {
    transform: rotate(90deg);
  }
}

//Three colors
.tri-color .color {
  &:before {
    content: "";
    position: absolute;
    width: $halfSize;
    height: $halfSize;
    border-radius: $size 0 0 0;
    transform-origin: 100% 100%;
  }
}

.tri-color .color:nth-child(1) {
  transform: rotate(0);
  &:before {
    transform: rotate(-30deg);    
  }
}
.tri-color .color:nth-child(2) {
  transform: rotate(90deg);
  &:before {
    transform: rotate(30deg);    
  }
}
.tri-color .color:nth-child(3) {
  z-index: 0;
  width: $size;
  height: $size;
  border-radius: $size;
  &:before {
    display: none;
  }
}

//Four colors
.quad-color .color {
  border-radius: $size 0 0 0;
  &:nth-child(2) {
    transform: rotate(90deg);
  }
  &:nth-child(3) {
    transform: rotate(180deg);
  }
  &:nth-child(4) {
    transform: rotate(270deg);
  }
}