// Star font, FontAwesome doesn't work :(
@font-face {
	font-family: 'star';
	src: url('../../plugins/woocommerce/assets/fonts/star.eot');
	src: url('../../plugins/woocommerce/assets/fonts/star.eot?#iefix') format('embedded-opentype'),
		url('../../plugins/woocommerce/assets/fonts/star.woff') format('woff'),
		url('../../plugins/woocommerce/assets/fonts/star.ttf') format('truetype'),
		url('../../plugins/woocommerce/assets/fonts/star.svg#star') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'WooCommerce';
	src: url('../../plugins/woocommerce/assets/fonts/WooCommerce.eot');
	src: url('../../plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix') format('embedded-opentype'),
		url('../../plugins/woocommerce/assets/fonts/WooCommerce.woff') format('woff'),
		url('../../plugins/woocommerce/assets/fonts/WooCommerce.ttf') format('truetype'),
		url('../../plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce') format('svg');
	font-weight: normal;
	font-style: normal;
}

.star-rating {
	overflow: hidden;
	position: relative;
	height: 1em;
	line-height: 1;
	font-size: 1em;
	width: 5.5em;
	font-family: 'star';

	&:before {
		content: "\73\73\73\73\73";
		color: rgba(0,0,0,0.2);
		float: left;
		top: 0;
		left: 0;
		position: absolute;
	}

	span {
		overflow: hidden;
		float: left;
		top: 0;
		left: 0;
		position: absolute;
		padding-top: 1.5em;
	}

	span:before {
		content: "\53\53\53\53\53";
		top: 0;
		position: absolute;
		left: 0;
		color: #fed700;
	}
}

p.stars {
	display: inline-block;
	margin: 0;

	a {
		position: relative;
		height: 1em;
		width: 1em;
		text-indent: -99999px;
		display: inline-block;
		text-decoration: none;
		margin-right: 1px;

		&:before {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 1em;
			height: 1em;
			line-height: 1;
			font-family: "WooCommerce";
			content: "\e021";
			text-indent: 0;
		}

		&:hover {
			~ a:before {
				content: "\e021";
			}
		}
	}

	&:hover {
		a {
			&:before {
				content: "\e020";
			}
		}
	}

	&.selected {
		a.active {
			&:before {
				content: "\e020";
			}

			~ a:before {
				content: "\e021";
			}
		}

		a:not(.active) {
			&:before {
				content: "\e020";
			}
		}
	}
}