@mixin notice-in-page-bg-map {
  &__body-copy {
    color: $color-brand--two;

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

  &--negative {
    background: $color--negative-5;
    border-color: $color--negative;

    .icon {
      color: $color--negative;
    }
  }

  &--positive {
    background: $color--positive-5;
    border-color: $color--positive;

    .icon {
      color: $color--positive;
    }
  }

  &--informative {
    background: $color--three-5;
    border-color: $color-brand--three;

    .icon {
      color: $color-brand--three;
    }
  }

  &--warning {
    background: $color--warning-10;
    border-color: $color--warning;

    .icon {
      color: $color--warning;
    }
  }

}