/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow
 *
*****************************************************************/


// Compass utilities @import "compass";
 // VARS $circle-width: 0.08em;
$circle-width-hover: 0.04em;
 // colors default $primary-color: #307bbb;
$secondary-color: #ccc;
$bg-color: #f5f5f5;
 $primary-color-green: #4db53c;
$primary-color-orange: #dd9d22;
 // colors dark skin $primary-color-dark: #c6ff00;
$secondary-color-dark: #777;
$bg-color-dark: #666;
 $primary-color-green-dark: #5fd400;
$primary-color-orange-dark: #e08833;
 // CIRCLE // classes 2 extend .rect-auto {
 clip: rect(auto, auto, auto, auto);
}
.pie {
	position: absolute;
 border: $circle-width solid $primary-color;
 width: 1 - (2 * $circle-width);
 height: 1 - (2 * $circle-width);
	clip: rect(0em, 0.5em, 1em, 0em);
	border-radius: 50%;
 @include rotate(0deg);
}
.pie-fill {
 @include rotate(180deg);
}
 // main .c100 {
 *, *:before, *:after {
 @include box-sizing(content-box);
}
 position: relative;
 font-size: 120px;
 width: 1em;
 height: 1em;
 border-radius: 50%;
 float: left;
 margin: 0 0.1em 0.1em 0;
 background-color: $secondary-color;
 // center circle to its parent  &.center {
 float: none;
 margin: 0 auto;
}
 // bigger size  &.big {
 font-size: 240px;
}
 // smaller size  &.small {
 font-size: 80px;
}
 // centered value inside circle  > span {
 position: absolute;
 width: 100%;
 z-index: 1;
 left: 0;
 top: 0;
 width: 5em;
 line-height: 5em;
 font-size: 0.2em;
 color: $secondary-color;
 display: block;
 text-align: center;
 white-space: nowrap;
 @include transition-property(all);
 @include transition-duration(0.2s);
 @include transition-timing-function(ease-out);
}
 // background inside the circle  &:after {
 position: absolute;
 top: $circle-width;
 left: $circle-width;
 display: block;
 content: " ";
 border-radius: 50%;
 background-color: $bg-color;
 width: 1 - (2 * $circle-width);
 height: 1 - (2 * $circle-width);
 @include transition-property(all);
 @include transition-duration(0.2s);
 @include transition-timing-function(ease-in);
}
 // the slice (mask)  .slice {
 position: absolute;
 width: 1em;
 height: 1em;
 clip: rect(0em, 1em, 1em, 0.5em);
}
 // circle to show the status  .bar {
 @extend .pie;
}
 // loop to create all needed elements automatically  @for $j from 51 through 100 {
 &.p# {
$j
}
.slice {
 @extend .rect-auto;
}
 &.p# {
$j
}
.bar:after {
 @extend .pie-fill;
}
 &.p# {
$j
}
.fill {
 @extend .pie;
 @extend .pie-fill;
}
}
 // loop to rotate all 100 circles  @for $j from 1 through 100 {
 &.p# {
$j
}
.bar {
 @include rotate((360/100*$j) + deg);
}
}
 // hover styles  &:hover {
 cursor: default;
 > span {
 width: 3.33em;
 line-height: 3.33em;
 font-size: 0.3em;
 color: $primary-color;
}
 &:after {
 top: $circle-width-hover;
 left: $circle-width-hover;
 width: 1 - (2 * $circle-width-hover);
 height: 1 - (2 * $circle-width-hover);
}
}
 // override colors for the dark skin  &.dark {
 background-color: $secondary-color-dark;
 .bar,  .fill {
 border-color: $primary-color-dark !important;
}
 > span {
 color: $secondary-color-dark;
}
 &:after {
 background-color: $bg-color-dark;
}
 &:hover {
 > span {
 color: $primary-color-dark;
}
}
}
 // green skin  &.green {
 .bar, .fill {
border-color: $primary-color-green !important;
}
 &:hover {
 > span {
color: $primary-color-green;
}
}
}
 &.green.dark {
 .bar, .fill {
border-color: $primary-color-green-dark !important;
}
 &:hover {
 > span {
color: $primary-color-green-dark;
}
}
}
 // orange skin  &.orange {
 .bar, .fill {
border-color: $primary-color-orange !important;
}
 &:hover {
 > span {
color: $primary-color-orange;
}
}
}
 &.orange.dark {
 .bar, .fill {
border-color: $primary-color-orange-dark !important;
}
 &:hover {
 > span {
color: $primary-color-orange-dark;
}
}
}
}