@import '../variables.scss';

.notifications-container{
  position: fixed;
  top: 0;
  right: 0;
  margin: 1.5%;
  width: 20%;
  z-index: 100000000;
}

@keyframes pop {
  from{
    opacity: 0;
  }to{
    opacity: 1;
  }
}

@keyframes fadeOut {
  from{opacity: 1;}
  to{opacity: 0;}
}
.fadeOut{
  animation: fadeOut .3s forwards!important;
}


.notif-title{
  display: flex;
  align-items: center;
  font-weight: bold;
  & svg{
    margin-inline-end: 8px;
  }
}

.notif{
  width: 100%;
  animation: pop .3s forwards;
  margin:  2% 0;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  padding: 2%;
}

.notif-msg{
  margin-left: 8%;
  font-size: .9em;
  & svg{
    margin-inline-end: 8px;
    opacity: 0;
  }
}

.notif-success{
  background-color: $green;
  opacity: 1;
  transition: .3s;
  &:hover{
    background-color: lighten($color: $green, $amount: 20);
    opacity: 0.8!important;
  }
}

.notif-danger{
  background-color: $red;
  opacity: 1;
  transition: .3s;
  &:hover{
    background-color: lighten($color: $red, $amount: 20);
    opacity: 0.8!important;
  }
}