.starRatingContainer {
  @include flex-direction(row);
  .starItem {
    padding: 0 0.1rem;
    font-size: 1.4rem;
    svg {
      fill: var(--star-rating-color);
    }
  }

  .fullStar{
    @include star(var(--full-star-fill-color), var(--full-star-border-color))
  }

  .halfStar{
    @include half-star(var(--half-star-border-color),  var(--halfFull-star-fill-color), var(--halfEmpty-star-fill-color))
  }

  .emptyStar{
    @include star(var(--empty-star-border-color), var(--empty-star-fill-color))
  }

  &.inactive {
    .fullStar{
      @include star(var(--empty-star-border-color), var(--empty-star-border-color))
    }
  
    .halfStar{
      @include half-star(var(--empty-star-border-color),  var(--empty-star-border-color), var(--halfEmpty-star-fill-color))
    }
  }
}