@mixin social-bg-map {

  .social__link:focus {
    outline-color: returnColorCSSVar('brand-secondary');

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

   //! deprecation warning remove after bg-map is final

   .bg-brand--off-white,
   .bg-brand--white {

     .contact-details__link .icon {
       color: $color-brand--two;
     }

     .social__link .icon--hover {
       color: $color-brand--two;

       &:hover {
         color: $color-brand--one;
       }
     }
   }
}