@import "settings.colors";

@import "mixins/tools.mixins";

// container for the all review content including stars and numbers
.o-review {
  width: rem(380);
  margin: 0 auto;
  padding: 0 rem(10);
  background-color: $color-stone-150;
}

.o-review--inline:first-child {
  margin-top: rem(18);
}

// floats rating left
.o-review--inline-left {
  max-width: rem(220);
  float: left;
  margin: 0 rem(20) 0 0;
}

// floats rating
.o-review--inline-right {
  max-width: rem(220);
  float: right;
  margin: 0 0 0 rem(20);
}

// container for ratings with a label beside it
.o-label-with-rating {
  display: inline-flex;
  width: 100%;
  height: rem(40);
  background-color: $color-stone-150;
  justify-content: center;
  align-items: center;
  margin: 0;
}

// container each group stars
.o-star-rating {
  display: inline-flex;
  width: auto;
  height: rem(40);
  margin: 0 0 0 rem(10);
  padding: 0;
}

@include mobile-only {
  .o-review {
    width: 100%;
    float: none;
    margin: 0;
    max-width: initial;
  }
}
