// dynamic
@mixin indicators-rating-dynamic-background-mapping {
  .bg-brand--light-grey {
    .ratings {
      svg,
      &:hover .ratings__input:checked ~ .icon svg {
        fill: $color-alpha--two-10;
      }

      &__input:checked ~ .icon svg,
      &:hover .ratings__input:checked ~ .icon:hover svg,
      &:hover .icon:hover svg,
      &:hover .icon:hover ~ .icon svg {
        fill: $color-brand--one;
      }
    }
  }
}

// readonly
@mixin indicators-rating-readonly-background-mapping {
  .bg-brand--light-grey {
    .icon--filled {
      @include svg-base64('star-filled-30', $color-brand--one);
    }

    .icon--filled:before {
      @include svg-base64('star-filled-30', $color-brand--white);
      // convert white to black since alpha color is not possible
      // here and black color is not in palette for all themes
      filter: invert(100%);
      opacity: 0.1;
    }
  }
}
