@mixin share-price-background-mapping {
  .share-price {
    .bg-brand--blue &,
    .bg-brand--turquoise &,
    .bg-brand--yellow & {
      &__rate {
        color: $color-brand--two;
      }
      svg {
        fill: $color-brand--two;
      }
    }

    .bg-brand--red & {
      &__rate {
        color: $color--two-180;
      }

      svg {
        fill: $color--two-180;
      }
    }

    @include bg-variants() {
      .share-price__rate,
      svg {
        color: variant-property('positive');
      }

      &.share-price--change-down .share-price__rate,
      &.share-price--change-down {
        .share-price__rate {
          color: variant-property('negative');
        }
        svg {
          fill: variant-property('negative');
        }
      }
    }
  }
}