.rating {
  @include flex(3.6rem, initial, center);

  /* To be removed */
  display: none !important;

  position: fixed;
  bottom: 8rem;
  left: 50%;
  transform: translateX(-50%);

  width: max-content;

  padding: 3rem;

  background-color: $color-grey-regular;
  box-shadow: $shadow-grey;
  transition: $transition-regular;
  backface-visibility: hidden;

  &.hidden-hard {
    bottom: -20rem;
  }

  &__text {
    font-family: $font-family-headings;

    @include respond(tab-port) {
      font-size: $font-size-larger;
    }
  }

  &__stars {
    @include flex(0.75rem);
  }

  &__star {
    @include flex(0, initial, center);
    color: transparent;

    background-image: $color-gradient-regular;
    -webkit-background-clip: text;
    background-clip: text;

    cursor: pointer;
  }
}
