@mixin overlays-modal-background-mapping {
  .modal--media {
    .modal__close svg {
      fill: returnColorCSSVar('brand-tertiary');
    }

    .modal__close:hover svg {
      fill: returnColorCSSVar('brand-primary');
    }
}

  .modal__dialog:not([class*='bg-variant-']):not([class*='bg-brand--']) {
    background: $color-brand--four;

    .modal__close svg {
      color: $color-brand--one;
    }
  }

  .modal__dialog {
    @include bg-variants($isChained: true) {
      .button.button--filled {
        @include button-filled-bg-map;
      }

      .button:not(.button--filled) {
        @include button-bg-map;
      }

      .icon--alternative {
        color: variant-property('iconInteractiveAlternative');
        &:hover {
          color: variant-property('iconInteractiveAlternativeHover');
        }
      }

      a {
        color: variant-property('linkIdle');
      }
    }
  }

  .modal__dialog.bg-brand--off-white {
    .modal__close svg {
      color: $color-brand--one;
    }
  }
}