// dynamic
@mixin indicators-rating-dynamic-background-mapping {
  .ratings {
    @include bg-variants(
      $supportedBackgrounds: (
        'brand-primary',
        'brand-tertiary',
        'white'
      )
    ) {
      svg {
        fill: currentColor;
      }
      label {
        color: variant-property('iconInteractiveAlternative');
        cursor: pointer;
      }
      input:checked ~ label {
        color: variant-property('divider');
      }
      input:checked + label svg {
        color: variant-property('iconInteractiveAlternative');
        // border: 2px solid  variant-property('iconInteractiveAlternative');
        // border-radius: 3px;
      }
      :hover input + label {
        color: variant-property('iconInteractiveAlternative');
      }
      input:hover ~ label, 
      input:focus ~ label {
        color: variant-property('divider');  
      }
      input:hover + label,
      input:focus + label {
        color: variant-property('iconInteractiveAlternative');
      }
      &:focus-within {
        outline:  2px solid variant-property('iconInteractiveAlternative');
      }  
      border-radius: 3px;
      padding-right: 20px;
      padding-bottom: 4px;
    }
  }

  // ! 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;
  }
}