.card {
  @include bg-variants(
    $isChained: true,
    $supportedBackgrounds: (
      'brand-primary',
      'brand-secondary',
      'brand-tertiary'
    )
  ) {
    .text--alternative {
      color: variant-property('bodySecondary');
    }

    a,
    .button-clean {
      color: variant-property('linkIdle');
    }

    .toggle-arrow.icon {
      color: variant-property('iconInteractiveAlternative');
    }

    .card__tags {
      color: variant-property('bodySecondary');
    }
  }
}

.card--extra-small {
  @include bg-variants(
    $isChained: true,
    $supportedBackgrounds: (
      'brand-tertiary',
      'white'
    )
  ) {
    &:hover {
      border-color: variant-property('titleSecondary');

      .icon {
        color: variant-property('iconInteractivePrimaryHover');
      }
    }

    .text--alternative {
      color: variant-property('bodySecondary');
    }

    a.card__link-title {
      color: variant-property('titlePrimary');
    }
  }
}