// @text--alternative

@mixin text--alternative {
  color: $color--two-60;

  // invert for cards because white bg = off-white card
  .cards &,
  .popover & {
    color: $color--two-80;
  }

  // specific color mappings
  .bg-brand--off-white &,
  .bg-brand-tertiary & {
    color: $color--two-80;

    // invert for cards because off-white bg = white card
    .cards & {
      color: $color--two-60;
    }
  }

  .bg-brand--blue &,
  .bg-brand--turquoise & {
    color: $color-alpha--four-50;
  }

  .bg-brand--yellow & {
    color: $color-alpha--two-70;
  }

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