@mixin content-block-background-mapping {
  @include viewport--l {
    &.content-block__bubble--primary,
    .bg-variant-brand-primary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-primary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-primary');
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--secondary,
    .bg-variant-brand-secondary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-secondary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-secondary');
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--quaternary,
    .bg-variant-brand-quaternary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: #659dab;
      }

      .content-block__bubble-bottom {
        background-color: #659dab;
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--quinary,
    .bg-variant-brand-quinary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-quinary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-quinary');
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--senary,
    .bg-variant-brand-senary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-senary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-senary');
        color: returnColorCSSVar('white');
      }
    }

    .bg-variant-brand-tertiary.carousel--photo &,
    .bg-variant-brand-tertiary.video--full-width & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-primary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-primary');
        color: returnColorCSSVar('white');
      }
    }

    .bg-variant-white.carousel--photo &,
    .bg-variant-white.video--full-width & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-primary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-primary');
        color: returnColorCSSVar('white');
      }
    }
  }
}
