@mixin footer-background-mapping {
  .footer__grid li a,
  .footer__info p{
      @include link-states {
        @include color-dark-shade-main;

        @include bg-variants ($supportedBackgrounds: ('brand-secondary', 'white')) {
          color: variant-property('navigationLinkIdle');
        }
      }
    }

  .footer .social__list svg:hover {
    fill: returnColorCSSVar('brand-secondary');

    @include bg-variants ($supportedBackgrounds: ('brand-secondary', 'white')) {
      fill: variant-property('navigationLinkHover');
    }
  }

  // accessibility settings
  .bg-brand--dark-blue .footer__grid li a {
    color: $color-alpha--four-50;
  }

  .bg-brand--dark-blue .footer__info svg,
  .footer__info p {
    @include color-dark-shade-main;
  }

  .bg-brand--dark-blue .footer__grid svg {
    color: $color--white;
  }

  // divider
  .bg-brand--dark-blue .footer .divider {
    border-color: $color--two-80;
  }

  //social list
  .footer .social__list svg {
      @include color-dark-shade-main;
  }

  .bg-brand--white .footer .social__list svg:hover {
    fill: $color-brand--two;
  }

  .bg-brand--dark-blue  .footer .social__list svg:hover {
    fill: $color-brand--four;
  }
}