.up-notification{
  $this : &;

  p{
    margin:0;
  }

  button{
    color:#fff;
  }

  width:20vw;
  margin:20px;
  display: flex;
  position: fixed;
  right:-100%;
  bottom:0;
  opacity: 0;
  animation: up_slide 1s forwards;

  &--success{
    background-color: nth($up-greens,1);
  }
  &--error{
    background-color: nth($up-reds,2);
  }
  &--warning{
    background-color: nth($up-yellows,2);
  }

  &__icon{
    flex:0 0 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(black, 0.25);
    color:#fff;
  }
  &__body{
    align-items: center;
    justify-content: center;
    margin: 10px 20px;
    color:$base_font_color;
  }

  &__slide-out{
    right:20px;
    opacity: 1;
    animation: up_slide_out 1s forwards;
  }

}
.up-notification__close {
  position: absolute;
  background-color: rgba(black, 0.3);
  color: #fff;
  border: none;
  outline: none;
  font-size: 12px;
  right: 5px;
  top: 5px;
  opacity: 0;
  cursor: pointer;

  .up-notification:hover & {
    opacity: 1;
  }

  &:hover {
    background-color: rgba(black, 0.5);
  }
}

@keyframes up_slide {
  100% { right: 20px; opacity: 1; }

  50% {opacity: 0.4;}
}

@keyframes up_slide_out {
  100% { right: -100%; opacity: 0; }

  50% {opacity: 0.4;}
}