$circle_width:  190px;
$stripe_border: 2px;
$stripe_width:  8px;

$front_color: $white;
$stripe_color: $gray-light;


.circle-diagram,
.inner_half_one, .inner_half_two, 
.outer_half_one, .outer_half_two, 
.middle_full {
	display: block; position: relative;
	margin: 0; padding: 0;
}


.circle-diagram {
	display: inline-block;
	margin: 20px auto;
	width: $circle_width; height: $circle_width;
	// border: solid 1px $stripe_color;
	border: none;
	@include border-radius( #{$circle_width * 3} );
	background: $front_color;
	
	.inner_half_one, .inner_half_two, 
	.outer_half_one, .outer_half_two, 
	.middle_full {
		display: block; position: absolute;
		@include border-radius( #{$circle_width * 3} #{$circle_width * 3} 0 0 );
		@include transform-origin(center bottom);
	}
	.inner_half_one, .inner_half_two {
		top: 0; left: 0;
		background: $front_color;
		width: $circle_width; height: $circle_width / 2;
	}
	.inner_half_one { @include rotation(90); }
	.inner_half_two { @include rotation(270); }
	
	.outer_half_one, .outer_half_two {
		top: $stripe_border; left: $stripe_border;
		background: #09c;
		width: $circle_width - $stripe_border * 2; 
		height: ($circle_width - $stripe_border * 2) / 2;
	}
	.outer_half_one {
		@include rotation(90);
		@include linear-gradient(to right, #0099cc, #006699);
	}
	.outer_half_two {
		@include rotation(270);
		@include linear-gradient(to right, #006699, #0099cc);
	}
	
	.middle_full {
		$pos: $stripe_border + $stripe_width;
		$width: $circle_width - ($stripe_border + $stripe_width) * 2;
		top: $pos; left: $pos;
		@include border-radius( #{$circle_width * 3} );
		width: $width; height: $width;
		line-height: $width;
		text-align: center;
		font-size: $width / 4;
		font-weight: bold;
		text-shadow: 0 1px 2px #000;
		color: #999;
		background: $front_color;
		z-index: 10;
	}
	
	&.dark {
		border:none;
		background: $stripe_color;
		&:after, .middle_full:after {
			display: block; position: absolute; content: "";
			top: 0; right: 0; bottom: 0; left: 0;
			@include border-radius( $circle_width * 3 );
			z-index: 10;
		}
		&:after { @include box-shadow( inset 0 1px 1px 0 rgba(0,0,0,.42), 0 1px 1px 0 rgba(255,255,255,.70) ); }
		.inner_half_one, .inner_half_two { background: $stripe_color; }
		.middle_full {
			$width: $circle_width - ($stripe_border + $stripe_border + $stripe_width) * 2;
			border: solid $stripe_border $stripe_color;
			width: $width; height: $width;
			line-height: $width;
			&:after { @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.70), 0 1px 2px 0 rgba(0,0,0,.42) ); }
		}
	}
	
	
	// more than 50% 
	&.halfplus {
		.outer_half_one { z-index: 5; }
		.inner_half_two { @include rotation(90); }
	}
}









// all in percentz

$circle_width:  1;
$stripe_border: .01;
$stripe_width:  .03;

$front_color: $white;
$stripe_color: $gray-light;



.circle-diagram,
.circle-diagram .placeholder-pic,
.inner_half_one, .inner_half_two, 
.outer_half_one, .outer_half_two, 
.middle_full {
	display: block; position: relative;
	margin: 0; padding: 0;
}


.circle-diagram.responsive {
	.placeholder-pic {
		width: 100%;
	}
	width: percentage($circle_width); height: percentage($circle_width);
	border: solid 1px $stripe_color;
	@include border-radius( 1000px );
	background: $front_color;
	
	.inner_half_one, .inner_half_two, 
	.outer_half_one, .outer_half_two, 
	.middle_full {
		display: block; position: absolute;
		@include border-radius( 1000px 1000px 0 0 );
		@include transform-origin(center bottom);
	}
	.inner_half_one, .inner_half_two {
		top: 0; left: 0;
		background: $front_color;
		width: percentage($circle_width); height: percentage($circle_width / 2);
	}
	.inner_half_one { @include rotation(90); }
	.inner_half_two { @include rotation(270); }
	
	.outer_half_one, .outer_half_two {
		top: percentage($stripe_border); left: percentage($stripe_border);
		background: #09c;
		width: percentage( $circle_width - $stripe_border * 2 );
		height: percentage( ($circle_width - $stripe_border * 2) / 2 );
	}
	.outer_half_one {
		@include rotation(90);
		// @include linear-gradient(to right, #0099cc, #006699);
	}
	.outer_half_two {
		@include rotation(270);
		// @include linear-gradient(to right, #006699, #0099cc);
	}
	
	.middle_full {
		$pos: $stripe_border + $stripe_width;
		$width: $circle_width - ($stripe_border + $stripe_width) * 2;
		top: percentage($pos); left: percentage($pos);
		@include border-radius( 1000px );
		width: percentage($width); height: percentage($width);
		line-height: percentage($width);
		text-align: center;
		font-size: percentage($width / 4);
		font-weight: bold;
		text-shadow: 0 1px 2px #000;
		color: #999;
		background: $front_color;
		z-index: 10;
	}
	
	&.dark {
		border:none;
		background: $stripe_color;
		&:after, .middle_full:after {
			display: block; position: absolute; content: "";
			top: 0; right: 0; bottom: 0; left: 0;
			@include border-radius( $circle_width * 3 );
			z-index: 10;
		}
		&:after { @include box-shadow( inset 0 1px 1px 0 rgba(0,0,0,.00), 0 1px 1px 0 rgba(255,255,255,.00) ); }
		.inner_half_one, .inner_half_two { background: $stripe_color; }
		.middle_full {
			$width: $circle_width - ($stripe_border + $stripe_border + $stripe_width) * 2;
			border: solid percentage($stripe_border) $stripe_color;
			width: percentage($width); height: percentage($width);
			line-height: percentage($width);
			&:after { @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.00), 0 1px 2px 0 rgba(0,0,0,.00) ); }
		}
	}
	
	
	// more than 50% 
	&.halfplus {
		.outer_half_one { z-index: 5; }
		.inner_half_two { @include rotation(90); }
	}
}