.notice-in-page {
  border-radius: $border-radius;
  display: flex;
  padding: $spacing--s;

  @include viewport--l {
    max-width: $baseline * 49;
  }

  .icon {
    margin-right: $baseline * 1.5;
    min-width: $baseline * 2;
    padding-top: $baseline * 0.2;
  }

  &__body-copy {
    @include font-style('body--m');
    color: $color-brand--two;

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

  &--negative {
    background: $color--negative-5;
    border: 1px solid $color--negative;

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

  &--positive {
    background: $color--positive-5;
    border: 1px solid $color--positive;

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

  &--informative {
    background: $notice-in-page-informative-background-colorbackground-color;
    border: 1px solid $notice-in-page-informative-background-colorborder-color;

    .icon {
      color: $notice-in-page-informative-background-coloricon-color;
    }
  }

  &--warning {
    background: $color--warning-10;
    border: 1px solid $color--warning;

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