.notifications-container {
  position: fixed;
  z-index: 99;
  bottom: 0;
  right: 0;
  width: 20vw;
}

.notification {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all linear 0.2s;
  animation: move-in 0.4s linear;
  background-color: rgba($light, 0.8);
  margin-top: 15px;
  padding: 10px;
  cursor: pointer;
  position: relative;

  &.warning,
  &.info,
  &.danger,
  &.success {
    &:before {
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0.2;
    }
  }

  &.danger {
    b {
      color: $danger;
    }

    &:before {
      @include icon-font($danger, 8rem);
      content: '\e912';
    }
  }

  &.info {
    b {
      color: $info;
    }

    &:before {
      @include icon-font($info, 8rem);
      content: '\e906';
    }
  }

  &.warning {
    b {
      color: $warning;
    }

    &:before {
      @include icon-font($warning, 8rem);
      content: '\e912';
    }
  }

  &.success {
    b {
      color: $success;
    }

    &:before {
      @include icon-font($success, 8rem);
      content: '\e902';
    }
  }

  &:hover {
    transform: translateX(10%);
  }
}

@keyframes move-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}