// Idea and implementation from http://atomicnoggin.ca/blog/2013/01/26/css3-pie-charts-revisited/

.rating {
	position: absolute;
	display: inline-block;
	top: .2em;
	left: 0;
	height: 1em;
	width: 1em;
	border: 1px solid @ratingPieBorder;
	border-radius: 0.5em;
	background-color: @ratingPieDefaultBg;
	.pie {
		position: absolute;
		display: block;
		width: 0.5em;
		height: 1em;
		overflow: hidden;
		left: 0.5em;
		.transformOrigin(left center);
	}
	.pie.gt-half {
		width: 1em;
		height: 1em;
		left: 0px;
		.transformOrigin(center center);
	}
	.pie:before {
		content: "";
		position: absolute;
		width: 0.5em;
		height: 1em;
		left: -0.5em;
		border-radius: 0.5em 0 0 0.5em;
		.transformOrigin(right center);

	}
	.pie.gt-half:before {
		left: 0px;
	}
	.pie.gt-half:after {
		content: "";
		position: absolute;
		width: 0.5em;
		height: 1em;
		left: 0.5em;
		border-radius: 0 0.5em 0.5em 0;
	}
	.pie {
		&:before, &:after {
			background-color: @ratingPieBg;
		}
	}
	.degree-30:before { .transform(rotate(30deg)); }
	.degree-60:before { .transform(rotate(90deg)); }
	.degree-90:before { .transform(rotate(90deg)); }
	.degree-120:before { .transform(rotate(120deg)); }
	.degree-150:before { .transform(rotate(150deg)); }
	.degree-180:before { .transform(rotate(180deg)); }
	.degree-210:before { .transform(rotate(210deg)); }
	.degree-240:before { .transform(rotate(240deg)); }
	.degree-270:before { .transform(rotate(270deg)); }
	.degree-300:before { .transform(rotate(300deg)); }
	.degree-330:before { .transform(rotate(330deg)); }
	.degree-360:before { .transform(rotate(360deg)); }
}
