/* stylelint-disable no-descending-specificity */

.starRatingContainer {
  @include flex-direction(row);

  justify-content: center;
  background-color: #fff;
  min-width: 6.5rem;
  min-height: 2.1rem;
  border-radius: 0.4rem;
  border: 1px solid var(--main-star-wrapper-color);
  color: #17182f;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0.33rem;
  line-height: 2.1rem;

  > svg {
    color: var(--icons-rating-color, #ffdb20);
    width: 23.35px;
    height: 22.26px;
    flex: none;
    margin-right: 6.32px;
  }

  &.inactive {
    .fullStar {
      @include star(
        var(--empty-star-border-color),
        var(--empty-star-border-color),
        unset,
        2.1rem
      );
    }
  }
}

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

.text {
  color: #17182f;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0.33rem;
  line-height: 2.1rem;
}

.labelMiddle {
  .fullStar {
    order: -1;
  }
}