@import "../variable";

v-notification, v-toast {
  top: 10vh;
  padding-bottom: .3rem;
  height: 90vh;
  display: flex;
  flex-direction: column-reverse;
  pointer-events: none;
  position: absolute;
}

v-notification {
  width: 90%;
  max-width: 400px;
  right: .3rem;
}

v-toast {
  right: 0;
  left: 0;
  margin: 0 auto;
  align-items: center;
}

v-notification-toast {
  margin-bottom: 10px;
  box-shadow: $box-shadow-1;
  overflow: hidden;
  background-color: $darker;
  color: #fff;
  border-radius: 9999rem;
  animation: toastOut ease-in-out 2000ms;
  display: flex;

  .message {
    padding: 1rem 1.5rem;
  }

  .icon-wrap {
    background-color: $primary;
    font-size: 1.3em;
    padding: .5em .5em .5em 1rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      margin-right: 0;
    }

    &.success {
      background-color: $successBorder;
    }

    &.error {
      background-color: $errorBorder;
    }

    &.warning {
      background-color: $warningBorder;
    }
  }
}

v-notification-item {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  box-shadow: $box-shadow-1;
  overflow: hidden;
  background-color: $darker;

  .message {
    padding: 1rem;
  }

  .fade-bar {
    animation: fadeOut ease-in-out 3000ms;
    height: .25rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    transform-origin: left;
    background-color: $primary;

    &.endless {
      animation: endlessFade ease-in-out 500ms infinite;
    }

    &.success {
      background-color: $successBorder;
    }

    &.error {
      background-color: $errorBorder;
    }

    &.warning {
      background-color: $warningBorder;
    }
  }
}


@keyframes fadeOut {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes toastOut {
  0%, 90% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(200%);
    opacity: 0;
  }
}

@keyframes endlessFade {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  49% {
    transform-origin: right;
  }
  50% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
  }
}