@mixin notice-in-page-bg-map {

  &__body-copy {
    color: returnColorCSSVar('brand-secondary');

    a,
    a:hover,
    a:focus {
      color: returnColorCSSVar('brand-secondary');
    }
  }

  &--negative {
    background: returnColorCSSVar('ui-negative-5');
    border-color: returnColorCSSVar('ui-negative');

    .icon {
      color: returnColorCSSVar('ui-negative');
    }
  }

  &--positive {
    background: returnColorCSSVar('ui-positive-5');
    border-color: returnColorCSSVar('ui-positive');

    .icon {
      color: returnColorCSSVar('ui-positive');
    }
  }

  &--informative {
    background: returnColorCSSVar('brand-primary-tint-7');
    border-color: returnColorCSSVar('brand-primary');

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

  &--warning {
    background: returnColorCSSVar('ui-warning-10');
    border-color: returnColorCSSVar('ui-warning');

    .icon {
      color: returnColorCSSVar('ui-warning');
    }
  }

  &--subtle {
    border-color: returnColorCSSVar('gray-20');

    @include bg-variants() {
      border-color: variant-property('divider');

      .notice-in-page__body-copy {
        color: variant-property('bodyPrimary');
      }
    }
  }
}