.notification {
  @apply px-8 py-4 relative;
  z-index: ;

  &--alert {
    @apply bg-secondary-light text-secondary;

    .notification__inner:before {
      background-image: url('../resources/img/graphic-assets/icon-info-red.svg');
    }
    .notification__close {
      @apply filter-secondary;
    }
    a[target='_blank'] {
      @apply !text-secondary;
      &:after {
        @apply filter-secondary;
      }
      &:hover,
      &:focus-visible {
        @apply outline-secondary;
        /* background: rgba(253, 245, 246, 1) !important; */
        background: rgba(223, 30, 30, 0.1) !important;
      }
    }
  }
  &--info {
    @apply bg-primary-light text-primary;
    .notification__inner:before {
      background-image: url('../resources/img/graphic-assets/icon-info-purple.svg');
    }
    .notification__close {
      @apply filter-primary;
    }
    a[target='_blank'] {
      @apply !text-primary;
      &:after {
        @apply filter-primary;
      }
      &:hover,
      &:focus-visible {
        @apply outline-primary;
        background: rgba(47, 1, 84, 0.1) !important;
      }
    }
  }

  &--dismissed {
    @apply hidden;
  }
  &__inner {
    @apply max-w-screen-xl px-8 mx-auto relative;
    &:before {
      @apply absolute top-1 left-0 w-5 h-5 bg-contain bg-no-repeat bg-center;
      content: '';
    }
  }
  &__title,
  &__content {
    @apply inline;
  }
  &__title {
    @apply font-bold text-lg mr-2;
  }
  &__content {
    @apply !text-base;

    > * {
      /* @apply inline; */
      @apply leading-tight;
    }
    > p {
      @apply inline;
    }
    a {
      @apply font-bold underline;
    }
  }
  &__close {
    @apply absolute flex justify-center items-center top-0  right-0 z-10;
    z-index: 10 !important;

    @apply inline-block w-6 h-6;
  }
}