<!-- Notification Container - All the nofications will go here--><div class="notification__container"></div><!-- Notification Container --><!-- Normal Components for the page --><button class="submit success">Toggle Success</button><button class="submit error">Toggle Error</button><button class="submit warning">Toggle Warning</button><button class="submit custom">Custom Notification</button>

// Notification styles Start here.notification {  max-width: 400px;  border-radius: 5px;  display: flex;  align-items: start;  gap: 2rem;  padding: 1rem 2rem;  transition: all 0.5s linear;  font-family:Sans-serif;  // Styling for the main container, as i am following BEM,  // it is nested inside the notification class  &__container {    position: fixed;    height: 80vh;    right: 0;    display: flex;    flex-direction: column;    align-items: end;    gap: 1rem;    overflow: auto;  }  &__heading{   font-weight:300;  }  // Delete button Styling  .delete {    cursor: pointer;    border: none;    background: transparent;    font-size: 1.3rem;    color: white;  }  // Main Message styling   &__description {    margin-top: 1rem;    font-size:0.9rem;    word-wrap:break-word;  }  //   Modifiers for success,error and warning notification  // These are default stylings for the notifications  &--success {    background-color: #17B169;    color: white;  }  &--error {    background-color: crimson;    color: white;  }  &--warning {    background-color: #FFC72C;    color: white;  }  @media screen and (max-width: 500px) {     padding:0.5rem 0.75rem;    max-width:200px;    &__heading{      font-size:1rem;    }    &__description{      font-size:0.7rem;    }  }}.slideOut {  border-radius:50%; transform:scale(0) rotate(720deg);}// Notification Styles end here

const miniNotification = ({ type, heading, message }) => {  const notificationContainer = document.querySelector(    ".notification__container"  );..};

..const notificationTemplate = () => {    const notificationTypes = ["success", "error", "warning"];    const newNotification = document.createElement("div");    if (notificationTypes.includes(type)) {      newNotification.setAttribute(        "class",        `notification notification--${type}`      );    } else {      newNotification.setAttribute("class", `notification ${type}`);    }    // Notification Template    newNotification.innerHTML = `    <div class="notification__text">      <h2 class="notification__heading">        ${heading}      </h2>      <p class="notification__description">       ${message}      </p>    </div>    <button class="delete">x</button>  `;    // Adding the notification to the container    notificationContainer.appendChild(newNotification);  };  notificationTemplate();..

..// Deleting the Notification  notificationContainer.addEventListener("click", (e) => {    const target = e.target;    if (target.matches(".delete")) {      const notification = target.closest(".notification");      notification.classList.add("slideOut");      setTimeout(() => {        if (notificationContainer.contains(notification)) {          notificationContainer.removeChild(notification);        }      }, 500);    }  });}