#notif-box {
   position: fixed;
   right: 0;
   bottom: 4rem;

   display: flex;
   flex-direction: column;
   align-items: end;
   z-index: 15;
   max-width: 30vw;
}

.notification {
   display: flex;
   align-items: center;

   border: var(--brd);
   border-radius: .5rem;
   margin: .5rem;

   background-color: var(--tbl);
   box-shadow: var(--shd);

   animation: notif-in .5s forwards;

   >* {
      word-break: break-all;
   }

   >.icon {
      padding: .25em;
   }
}

.notif-inner {
   padding: .5em;

   &:not(:first-child) {
      border-left: var(--brd);
   }

   p {
      margin: 0;
   }

}

.notification[data-type="message"] .icon {
   filter: drop-shadow(0 0 .25em var(--yl));
}

.notification[data-type="research"] .icon {
   filter: drop-shadow(0 0 .25em var(--sc));
}

@keyframes notif-in {
   0% {
      margin-right: -100%;
   }

   100% {
      margin-right: .5rem;
   }
}

.notification.notif-out {
   animation: notif-out .5s forwards;
}


@keyframes notif-out {

   100% {
      margin-right: -100%;
   }
}