Aurora-SpotiRip/components/SonnerToaster.module.css

@layer base {
  .toaster {
    --viewport-padding: var(--spacing-4);
    --toast-width: 360px;
    --toast-border-radius: var(--radius);
    --toast-font-family: var(--font-family-base);
    --toast-animation-duration: var(--animation-duration-normal);
  }
  
  .toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: var(--card);
    color: var(--card-foreground);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    width: var(--toast-width);
    position: relative;
    animation: slideIn var(--toast-animation-duration) cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  
  .toast:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  
  .toast:hover {
    transform: translateY(-2px);
  }
  
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
  }
  
  .title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--card-foreground);
    line-height: 1.4;
  }
  
  .description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.4;
  }
  
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
  }
  
  .actionButton {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast) ease;
    margin-left: var(--spacing-2);
    white-space: nowrap;
  }
  
    .actionButton:hover {
    background-color: color-mix(in srgb, var(--primary) 90%, black);
  }

  .actionButton:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }

  .actionButton:active {
    background-color: color-mix(in srgb, var(--primary) 80%, black);
  }
  
  .cancelButton {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--muted);
    color: var(--muted-foreground);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast) ease;
    white-space: nowrap;
  }
  
    .cancelButton:hover {
    background-color: color-mix(in srgb, var(--muted) 80%, white);
  }

  .cancelButton:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }

  .cancelButton:active {
    background-color: color-mix(in srgb, var(--muted) 75%, white);
  }
  
  .closeButton {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--muted-foreground);
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--animation-duration-fast) ease, 
                background-color var(--animation-duration-fast) ease;
  }
  
  .closeButton:hover {
    opacity: 1;
    background-color: var(--muted);
  }
  
  .closeButton:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    opacity: 1;
  }
  
  :global(.dark) .toast {
    border-color: var(--border);
  }
  
    :global(.dark) .actionButton:hover {
    background-color: color-mix(in srgb, var(--primary) 90%, white);
  }

  :global(.dark) .actionButton:active {
    background-color: color-mix(in srgb, var(--primary) 80%, white);
  }

  :global(.dark) .cancelButton:hover {
    background-color: color-mix(in srgb, var(--muted) 80%, black);
  }

  :global(.dark) .cancelButton:active {
    background-color: color-mix(in srgb, var(--muted) 70%, black);
  }
  
  @keyframes slideIn {
    from {
      transform: translateX(calc(100% + var(--viewport-padding)));
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}