@import '../variables';

.itf-toast-container.toast-container {
  position: fixed;
  z-index: $zindex-tooltip;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 15px;

  .toast-body {
    word-break: break-word;
  }

  &.is-top-left,
  &.is-top-center,
  &.is-top-right {
    width: 100%;
    top: 0;
    left: 0;
  }
  &.is-top-left {
    align-items: flex-start;
  }
  &.is-top-center {
    align-items: center;
  }
  &.is-top-right {
    align-items: flex-end;
  }
  &.is-center {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
  }
  &.is-bottom-left,
  &.is-bottom-center,
  &.is-bottom-right {
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  &.is-bottom-left {
    align-items: flex-start;
  }
  &.is-bottom-center {
    align-items: center;
  }
  &.is-bottom-right {
    align-items: flex-end;
  }
  &.has-mask {
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%;
    pointer-events: all;
  }
}


.itf-toast-wrapper {
  max-width: 100%;
}
.itf-toast-fade-enter-active {
  animation: itf-toast-fade-in-down 0.3s;
}

.itf-toast-fade-leave-active {
  animation: itf-toast-fade-out 0.3s;
}

@keyframes itf-toast-fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes itf-toast-fade-out {
  0% {
    opacity: 1;
    margin-top: 0;
  }
  100% {
    opacity: 0;
    margin-top: -45px;
  }
}
.itf-toast-message.toast {
  --bs-toast-max-width: 400px;
  z-index: $zindex-toaster;
}
