@mixin collapsible-background-mapping {
  .toggle-arrow.icon {
    color: returnColorCSSVar('brand-primary');
  }

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

  .collapsible__button {
    &:before,
    &:after {
      @include bg-variants() {
        background: variant-property('iconInteractiveAlternative');
      }
    }
  }

  .collapsible__link {
    color: returnColorCSSVar('brand-primary');

    @include bg-variants (
      $isChained: true,
      $supportedBackgrounds: (
        'brand-tertiary'
      )
     ) {
      color: variant-property('linkIdle');
      }
  }

  //! deprecation warning: do not use after color map is live

  .collapsible__link {
    color: $color-brand--one;
  }
}