@import "../colors.scss";

.notifications {
  position: absolute;
  z-index: 50;
  bottom: 50px;
  left: 30px;

  .notification {
    overflow: hidden;
    width: 250px;
    margin: 10px 0;
    padding: 10px;
    transition: all 1s ease;
    transform: translateX(-300px);
    white-space: nowrap;
    text-overflow: ellipsis;
    color: $color-green-light;
    border-left: 5px solid $color-green-dark;
    background-color: $color-green;
    cursor: pointer;

    .notification-title {
      font-size: 0.9em;
      margin: 0;
    }

    .notification-description {
      font-size: 0.8em;
    }

    &.notification-open {
      transform: translateX(0px);
    }

    &.notification-closed {
      transform: translateY(-50px);
      opacity: 0;
    }
  }
}