// toast.scss
.toast-container {
   position: fixed;
   bottom: 130px;
   left: 250px;
   z-index: 9999; /* Ensure it's on top of other UI elements */
   max-width: 400px;
   pointer-events: none; /* Ensure it doesn't interfere with other UI elements */
}

.toast {
   display: flex;
   flex-direction: column; /* Stack elements vertically */
   align-items: flex-start; /* Align items to the start */
   background-color: #333;
   color: #e4e4e4;
   font-size: 15px;
   padding: 10px;
   border-radius: 5px;
   border-color: #333;
   border-width: 3px;
   margin-bottom: 10px;
   opacity: 1; /* Start fully visible */
   pointer-events: auto;
   animation: fadein 0.5s forwards;

   .attack-success, .roll-success {
      margin-top: 2px;
      font-size: 20px;
      color: #bee8b1;
   }

   .attack-fail, .roll-fail {
      margin-top: 2px;
      font-size: 20px;
      color: #faa4a4;
   }

   .attack-info {
      margin-top: 2px;
      font-size: 20px;
      color: #90b0e0;
   }

   .damage {
      font-size: 20px;
      font-weight: bold;
   }

   &.fadeout {
      animation: fadeout 0.5s forwards;
   }

   &.success {
      background-color: #142715;
   }

   &.error {
      background-color: #30120f;
   }

   &.warning {
      background-color: #282214;
   }

   &.info {
      background-color: #1b262b;
   }
}

@keyframes fadein {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeout {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
      transform: translateY(-20px);
   }
}
