Woocommerce Star Rating SCSS

woo-rating.scss

p.stars {
	position: relative;
	font-size: u(1.5rem);
	margin: 0;
	text-align: center;
	
	width: 200px;
	margin: 0 auto;

	a {
		display: inline-block;
		font-weight: 700;
		text-indent: -9999px;
		position: relative;
		padding: 0;
		outline: 0;
		width: 20%;
		vertical-align: top;

		&:last-child {
			border-right:0;
		}

		&.star-1,
		&.star-2,
		&.star-3,
		&.star-4,
		&.star-5 {
			
			&:after {
				content: "\e020";
				font-family: "WooCommerce";
				text-indent: 0;
				position: absolute;
				top: 0;
				left: 0;
				
				color: $star-yellow;
				@include transition(0.05s color $ease-in-out-quart);
				//padding-right: 1em;
			}

			&:hover:after,
			&.active:after {
				color: $star-yellow;
			}

		}

		&.star-1 {
			&:hover, &.active {
				&:after{
					color: $star-yellow;	
				}
				& ~ a {
					&:after{
						color: darken($brand-highlight, 10%);
					}
				}
			}	
		}

		&.star-2 {
			&:hover, &.active {
				&:after{
					color: $star-yellow;	
				}
				& ~ a {
					&:after{
						color: darken($brand-highlight, 10%);
					}
				}
			}	
		}

		&.star-3 {
			&:hover, &.active {
				&:after{
					color: $star-yellow;	
				}
				& ~ a {
					&:after{
						color: darken($brand-highlight, 10%);
					}
				}
			}	
		}

		&.star-4 {
			&:hover, &.active {
				&:after{
					color: $star-yellow;	
				}
				& ~ a {
					&:after{
						color: darken($brand-highlight, 10%);
					}
				}
			}		
		}

		&.star-5 {
			&:hover, &.active {
				&:after{
					color: $star-yellow;	
				}
				& ~ a {
					&:after{
						color: darken($brand-highlight, 10%);
					}
				}
			}		
		}
	}
}