/**
 * @file
 * Reviews block.
 */
/* There is a padding-left on .container that forces to move this to the left and prevents cover all the area. That is the reason for this adjustment */
.reviews__block {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
  margin-bottom: 15px;
}

.reviews__label {
  font-size: 90%;
}

.reviews__reviews-count {
  font-size: 80%;
}

.reviews__stars {
  position: relative;
  display: inline-flex;
}

.klg-star {
  mask: url("../../../images/icons/solid-star.svg") no-repeat 50% 50%;
  mask-size: contain;
  -webkit-mask: url("../../../images/icons/solid-star.svg") no-repeat 50% 50%;
  -webkit-mask-size: contain;
  background-color: #aaa;
  position: relative;
  top: 2px;
  /* We need to repeat this whole block, to change the colour. */
}
.klg-star--normal {
  height: 16px;
  width: 18px;
}
.klg-star--full {
  background-color: #FFC800;
}
.klg-star--part-1 {
  background-image: linear-gradient(90deg, #FFC800 32%, transparent 0%);
}
.klg-star--part-2 {
  background-image: linear-gradient(90deg, #FFC800 42%, transparent 0%);
}
.klg-star--part-3 {
  background-image: linear-gradient(90deg, #FFC800 52%, transparent 0%);
}
.klg-star--part-4 {
  background-image: linear-gradient(90deg, #FFC800 62%, transparent 0%);
}
.klg-star--part-5 {
  background-image: linear-gradient(90deg, #FFC800 72%, transparent 0%);
}
.hero-block .klg-star--part-1 {
  background-image: linear-gradient(90deg, #fff 32%, transparent 0%);
}
.hero-block .klg-star--part-2 {
  background-image: linear-gradient(90deg, #fff 42%, transparent 0%);
}
.hero-block .klg-star--part-3 {
  background-image: linear-gradient(90deg, #fff 52%, transparent 0%);
}
.hero-block .klg-star--part-4 {
  background-image: linear-gradient(90deg, #fff 62%, transparent 0%);
}
.hero-block .klg-star--part-5 {
  background-image: linear-gradient(90deg, #fff 72%, transparent 0%);
}

/* Hero blocks have a background image and therefore use different colours. */
.hero-block .reviews__label {
  color: #fff;
}
.hero-block .reviews__reviews-count {
  color: #fff;
}
.hero-block .klg-star--full {
  background-color: #fff;
}

/*# sourceMappingURL=reviews.css.map */