react-high-toast/dist/esm/styles/toast.css

A highly customizable toast notification system for React using portals

/* Base Toast Container */
.toast-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  /* Position Styles */
  .toast-container.top-left {
    top: 1rem;
    left: 1rem;
  }
  .toast-container.top-center {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .toast-container.top-right {
    top: 1rem;
    right: 1rem;
  }
  .toast-container.bottom-left {
    bottom: 1rem;
    left: 1rem;
  }
  .toast-container.bottom-center {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .toast-container.bottom-right {
    bottom: 1rem;
    right: 1rem;
  }
  
  /* Individual Toast */
  .toast {
    position: relative;
    min-width: 250px;
    max-width: 350px;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: white;
    color: #333;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Toast States */
  .toast.exiting {
    opacity: 0;
    transform: translateY(-20px);
  }
  
  /* Toast Content */
  .toast-icon {
    margin-right: 0.75rem;
    font-size: 1.25rem;
  }
  .toast-content {
    flex: 1;
  }
  .toast-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    margin-left: 0.5rem;
  }
  .toast-close:hover {
    opacity: 1;
  }
  
  /* Type Variants */
  .toast.success {
    background: #f0fff4;
    color: #2f855a;
  }
  .toast.error {
    background: #fff5f5;
    color: #c53030;
  }
  .toast.warning {
    background: #fffaf0;
    color: #c05621;
  }
  .toast.info {
    background: #ebf8ff;
    color: #2b6cb0;
  }
  
  /* Animation Keyframes */
  @keyframes slideIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes fadeOut {
    to { opacity: 0; }
  }
  
  .toast.slide-in {
    animation: slideIn 0.3s ease-out forwards;
  }
  
  .toast.fade-out {
    animation: fadeOut 0.3s ease-in forwards;
  }