SIGSEV/Starveller

@import './colors.scss';

.Messages--container {

  position: fixed;
  right: 1em;
  bottom: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .Message {
    padding: 1em;
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    background: darken(white, 4);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 3px 8px 1px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 1em;
  }

  .Message-info {
    color: white;
    background: $blue;
  }

  .Message-error {
    color: rgba(255, 255, 255, 0.7);
    background: $red;
  }

  .Message-warning {
    background: orange;
  }

}

.messagesTransition-enter {
  position: relative;
  z-index: -1;
  animation: show-alerter-message 0.5s;
}

.messagesTransition-leave {
  position: relative;
  z-index: -1;
}

.messagesTransition-leave.messagesTransition-leave-active {
  animation: hide-alerter-message ease-out 0.5s;
}

@keyframes show-alerter-message {
  from {
    opacity: 0;
    max-height: 0;
    transform: translate(60px, 60px);
  }
  to {
    opacity: 1;
    max-height: 100px;
    transform: translate(0, 0);
  }
}


@keyframes hide-alerter-message {
  from {
    max-height: 300px;
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    max-height: 0;
    opacity: 0;
    transform: translate(0, 60px);
  }
}