// dynamic
@mixin indicators-rating-dynamic-background-mapping {
  .ratings {
    @include bg-variants(
      $supportedBackgrounds: (
        'brand-primary',
        'brand-tertiary',
        'white'
      )
    ) {
      .icon svg,
      &:hover .ratings__input:checked ~ .icon svg {
        fill: variant-property('divider');
      }
      &__input:checked ~ .icon svg,
      &:hover .ratings__input:checked ~ .icon:hover svg,
      &:hover .icon:hover svg,
      &:hover .icon:hover ~ .icon svg {
        fill: variant-property('iconInteractiveAlternative');
      }
    }
  }

  // ! Deprecation warning - new color map
  .bg-brand--blue {
    .rating-dynamic__header {
      color: $color-brand--white;
    }

    .ratings {
      svg,
      &:hover .ratings__input:checked ~ .icon svg {
        fill: $color-alpha--four-50;
      }

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

    .ratings__description.text--alternative {
      color: $color-brand--white;
    }
  }
}

// readonly
@mixin indicators-rating-readonly-background-mapping {
  .rating-readonly {
    @include bg-variants(
      $supportedBackgrounds: (
        'brand-primary'
      )
    ) {
      .icon--filled {
        @include svg-base64('star-filled', $color-brand--white);
        background-size: 30px 20px;
      }
      .icon--filled:before {
        @include svg-base64('star-filled', $color-brand--white);
        background-size: 30px 20px;
        opacity: 0.3;
      }
    }
  }

  .bg-brand--blue {
    .icon--filled {
      @include svg-base64('star-filled', $color-brand--white);
    }

    .icon--filled:before {
      @include svg-base64('star-filled', $color-brand--white);
      background-size: 30px 20px;
      opacity: 0.5;
    }

    .rating-readonly__description.text--alternative {
      color: $color-brand--white;
    }
  }

  .dashboard-card--middle .icon--filled:before {
    @include svg-base64('star-filled', $color-brand--one);
    opacity: 0.3;
    background-size: 30px 20px;
  }
}
