// dynamic
@mixin indicators-rating-dynamic-background-mapping {
  .ratings {
    svg {
      fill: currentColor;
    }
    label {
      color: $color-brand--one;
      cursor: pointer;
    }
    input:checked ~ label {
      color: $color-alpha--two-10;
    }
    input:checked + label svg {
      color: $color-brand--one;
      border: 2px solid $color-brand--one;
      border-radius: 3px;
    }
    :hover input + label {
      color: $color-brand--one;
    }
    input:hover ~ label, 
    input:focus ~ label {
      color: $color-alpha--two-10;  
    }
    input:hover + label,
    input:focus + label {
      color: $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;
    }
  }
}