.rating-dynamic {
  display: block;
  height: $baseline * 6.5;
  max-width: $rating-dynamic-width;

  .rating-dynamic__header {
    @include font-style('body--m');
    display: block;
    margin-bottom: $spacing--xs;
    margin-left: 20px;
    max-width: $rating-dynamic-width;
  }
}

.ratings {
  &:focus-within {
    outline:  5px solid $color-brand--two;
  }

  float: left;
  position: relative;

  .no--visually {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    position: absolute;
  }

  svg {
    padding: 2px;
  }
  
  &__input {
    &:checked + .icon svg { 
      animation: grow $transition-duration--slow;
    }
    &:focus + .icon svg {
      animation: grow $transition-duration--slow;
    }
  }

  &__description {
    @include font-style($ratings-description-font-style);
    opacity: 0;
    left: 0;
    margin-top: $spacing--xxs;
    pointer-events: none;
    position: absolute;
    top: $spacing--m;
    white-space: nowrap;
  }

  & .icon {
    float: left;
    line-height: $spacing--m;
    height: $spacing--m;
    padding-left: 15px;
    width: $icon-size--l;

    &:first-of-type {
        padding-left: 0;
    }

    &:hover + .ratings__description {
      opacity: 1; 
      transition: ease-in-out $transition-duration--fast;
    }
  }

  &__input:checked + .icon + .ratings__description,
  .icon:hover + .ratings__description {
    opacity: 1;
    transition: ease-in-out $transition-duration--fast;
  }

  // // this effect was blocking the normal hover hinting
  // svg,
  // &:hover .ratings__input:checked ~ .icon svg {
  //   fill: $color--grey;
  //   transition: ease-in-out $transition-duration--fast;
  // }


  &:hover .ratings__input:checked ~ .icon:hover svg,
  &:hover .icon:hover svg,
  &:hover .icon:hover ~ .icon svg {
    cursor: pointer;
    transition: ease-in-out $transition-duration--fast;
  }

  &:hover .ratings__input:checked + .icon + .ratings__description {
    visibility: hidden;
    opacity: 0;
    transition-duration: $transition-duration--faster;
  }

  &:hover .ratings__input:checked + .icon:hover + .ratings__description {
    visibility: visible;
    opacity: 1;
    transition-duration: $transition-duration--faster;
  }

  label span {
    pointer-events: none;
  }
}

// background mappings
@include indicators-rating-dynamic-background-mapping;

@include viewport--s {
  .ratings__description {
    left: 100%;
    margin-left: $spacing--s;
    margin-top: 0;
    top: 0;
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.1);
  }
  66% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/** READONLY **/
.rating__wrapper {
  display: flex;
}

.rating-readonly {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  height: $spacing--s;
  justify-content: flex-end;
  max-width: $rating-readonly-width;
  z-index: 0;

  &.rating--l {
    min-width: $rating-readonly-width;
  }

  &.rating--m {
    .rating-readonly__icon--wrapper,
    .icon--filled:before {
      width: $rating-readonly-m-width;
    }
  }

  &.rating--s {
    .rating-readonly__icon--wrapper,
    .icon--filled:before {
      width: $rating-readonly-s-width;
    }
  }
}

.rating-readonly__icon--wrapper {
  height: $spacing--s;
  margin-right: $spacing--s;
  width: $rating-readonly-icon-width;
}

.rating-readonly__description {
  @include font-style('body--l');
  line-height: $spacing--s;
  margin-top: $spacing--xxs;
}

.icon--filled {
  @include svg-base64('star-filled', $color-brand--one);
  background-size: 30px 20px;
  height: $spacing--s;
  position: relative;
}

.icon--filled:before {
  @include svg-base64('star-filled', $color--grey);
  background-size: 30px 20px;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  width: $rating-readonly-icon-width;
  z-index: -1;
}

@media only screen and (min-width: 310px) {
  .rating-readonly {
    flex-direction: row-reverse;
  }

  .rating-readonly__description {
    margin-top: 0;
  }
}

// background mappings
@include indicators-rating-readonly-background-mapping;