.star-rating {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: flex-start;
font-family: 'ninetheme-font';
}
.star-rating::before {
content: "\f148\f148\f148\f148\f148";
color: var(--goldsmith-gray);
}
.star-rating>span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 100%;
font-size: 0;
}
.star-rating>span::before {
content: "\f148\f148\f148\f148\f148";
top: 0;
position: absolute;
left: 0;
color: var(--goldsmith-base);
}
.star-rating,
.star-rating>span::before {
font-size: 12px;
line-height: 1;
}
p.stars {
line-height: 1;
font-size: 0;
margin: 0;
}
p.stars a {
padding-right: 10px;
margin-right: 10px;
position: relative;
color: var(--goldsmith-gray);
}
p.stars a:not(:last-child):after {
content: "|";
position: absolute;
right: 0;
font-size: 12px;
}
p.stars a:before {
font-family: 'ninetheme-font';
font-size: 12px;
letter-spacing: 2px;
}
p.stars a.star-1:before {
content: "\f148";
}
p.stars a.star-2:before {
content: "\f148\f148";
}
p.stars a.star-3:before {
content: "\f148\f148\f148";
}
p.stars a.star-4:before {
content: "\f148\f148\f148\f148";
}
p.stars a.star-5:before {
content: "\f148\f148\f148\f148\f148";
}
p.stars a:hover:before,
p.stars.selected a.active:before {
color: var(--goldsmith-base);
}
@media(max-width:576px) {
p.stars a:before {
font-size: 10px;
}
}