@import '../variables.scss';

.notifications-container{
  position: fixed;
  top: 0;
  right: 0;
  margin: 1.5%;
  width: 375px;
  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:  10px 0;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  background-color: $background!important;
  &::after{
    content: '';
    width: 2%;
    height: 3px;
    background-color: blue;
    position: absolute;
    bottom: 10px;
    right: 0;
    animation: progress 3.5s forwards;
  }

  &::before{
    content: '';
    width: 100%;
    height: 3px;
    background-color: $background-light;
    position: absolute;
    bottom: 10px;
    right: 0;
  }
}


.notif-content{
  padding: 2%;
}

@keyframes progress {
  from{width: 100%;}
  to{width: 0;}
}

.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;
  }
  &::after{
     background-color: $green;
   }
}

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

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

   &::after{
     background-color: $bleu;
   }
}