// @text--alternative

@mixin text--alternative {
  color: returnColorCSSVar('brand-secondary-tint-60');

  a {
    color: returnColorCSSVar('brand-secondary-tint-60');
    text-decoration: underline solid currentColor;
    &:hover {
      text-decoration: underline solid transparent;
    }
  }

  // invert for cards because white bg = off-white card
  //! Need to be moved to cards and popover.
  .cards &,
  .popover & {
    color: $color--two-80;
  }

  // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
  // 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;
  }

  @include bg-variants() {
    color: variant-property('bodySecondary');
  }
}

@mixin text--positive {
  color: returnColorCSSVar('ui-positive');

  @include bg-variants() {
    color: variant-property('positive');
  }
}

@mixin text--negative {
  color: returnColorCSSVar('ui-negative');

  @include bg-variants() {
    color: variant-property('negative');
  }
}

@mixin text--emphasis {
  color: returnColorCSSVar('brand-primary');

  @include bg-variants {
    color: variant-property('titleSecondary');
  }
}