/* Container to hold all stars */
.thinker-star-container {
display: flex;
justify-content: flex-start;
width: 100%;
height: 20px;
position: relative;
align-items: center;
gap: 4px;
}
.thinker-star-rating {
display: flex;
font-size: 20px; /* Size of each star */
width: 100%; /* The container will hold the stars */
height: 20px;
position: relative;
}
.thinker-star-rating-fill {
position: absolute;
display: flex;
left: -1px;
top: -1px;
}
/* Styles for individual stars */
.star {
display: inline-block;
width: 20px; /* Size of each individual star */
height: 18px;
background-image: url('data:image/svg+xml;utf8,'); /* Empty star icon */
background-size: contain;
background-repeat: no-repeat;
}
.star-background .star {
background-image: url('data:image/svg+xml;utf8,');
}
.star-fill .star {
background-image: url('data:image/svg+xml;utf8,');
}
/* Full star class */
.star.full {
background-image: url('data:image/svg+xml;utf8,'); /* Full star icon */
background-size: cover;
}
/* Fractional classes for each 10% increment */
.star.star-fill-10 {
width: 10%;
}
.star.star-fill-20 {
width: 20%;
}
.star.star-fill-30 {
width: 30%;
}
.star.star-fill-40 {
width: 40%;
}
.star.star-fill-50 {
width: 50%;
}
.star.star-fill-60 {
width: 60%;
}
.star.star-fill-70 {
width: 70%;
}
.star.star-fill-80 {
width: 80%;
}
.star.star-fill-90 {
width: 90%;
}
.star.star-fill-100 {
width: 100%;
}
/* Empty star background */
.star.empty {
background-image: url('data:image/svg+xml;utf8,'); /* Empty star icon */
}