#notification-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  pointer-events: none;
}

@scope (#notification-container) {
  .notification-card {
    pointer-events: auto;
    border-radius: 8px;
    font-size: 13px;
    min-width: 250px;
    max-width: 500px;
    padding: 10px 12px;
    margin-top: 1em;
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.45, 0, 0.55, 1);
    animation: slideIn 0.3s cubic-bezier(0.45, 0, 0.55, 1);
  }

  .error-card {
    color: #ffcccc;
    background: #4a1c1cd4;
    border-left: 3px solid #ff565699;
  }

  .message-card {
    color: white;
    background: #130f24d4;
    border-left: 3px solid #f28e0099;
  }

  .notification-card.closed {
    transform: translateX(100%);
    opacity: 0;
  }

  p {
    margin-bottom: 0;
    margin-right: 1em;
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .close-btn span {
    margin-bottom: 3px;
  }
}