.rating-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rating-scale {
  display: grid;
  gap: $spacing-xxs;
  grid-auto-flow: column;
  @include media-breakpoint-up(md) {
    gap: $spacing-xs;
  }
}

.rating-scale .selectable-token {
  width: 100%;
}

.rating-scale .selectable-token label {
  width: 100%;
  justify-content: center;
  padding-left: $spacing-xxs;
  padding-right: $spacing-xxs;
}

.rating-labels {
  display: flex;
  justify-content: space-between;
  margin-top: $spacing-xxs;
  font-size: $font-size-label;
  color: $label-default-color;
}

.rating-labels .label-max {
  text-align: right;
}