Nexus-InglineSystems/resources/css/toast.css

@layer components {
    /* ================================================================== */
    /* Estilos Aprimorados do Componente TOAST                           */
    /* resources/css/toast.css                                            */
    /* ================================================================== */
  
    .toast-card {
      @apply pointer-events-auto flex w-full max-w-sm items-start gap-x-3.5 rounded-xl bg-white shadow-xl ring-1 ring-black/5;
      animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(8px);
      transition: all 0.2s ease;
    }
  
    .toast-card:hover {
      @apply shadow-2xl ring-black/10;
      transform: translateY(-2px);
    }
  
    @keyframes toast-slide-in {
      from {
        opacity: 0;
        transform: translateX(100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  
    /* Estilo do Toast de Sucesso (Verde) */
    .toast-success {
      @apply p-4 relative overflow-hidden;
    }
  
    .toast-success::before {
      content: "";
      @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-green-400 to-green-600;
    }
  
    .toast-success .toast-icon-success {
      @apply flex-shrink-0 text-green-600 transition-transform duration-200;
      filter: drop-shadow(0 2px 4px rgb(34 197 94 / 0.2));
    }
  
    .toast-success:hover .toast-icon-success {
      transform: scale(1.1) rotate(5deg);
    }
  
    .toast-success .toast-message {
      @apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed;
    }
  
    .toast-success .toast-close-button {
      @apply inline-flex flex-shrink-0 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200;
      padding: 0.375rem;
    }
  
    .toast-success .toast-close-button:active {
      transform: scale(0.95);
    }
  
    /* Estilo do Toast de Erro (Vermelho) */
    .toast-error {
      @apply p-4 relative overflow-hidden;
    }
  
    .toast-error::before {
      content: "";
      @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-red-400 to-red-600;
    }
  
    .toast-error .toast-icon-error {
      @apply flex-shrink-0 text-red-600 transition-transform duration-200;
      filter: drop-shadow(0 2px 4px rgb(239 68 68 / 0.2));
    }
  
    .toast-error:hover .toast-icon-error {
      transform: scale(1.1) rotate(-5deg);
    }
  
    .toast-error .toast-message {
      @apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed;
    }
  
    .toast-error .toast-close-button {
      @apply inline-flex flex-shrink-0 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200;
      padding: 0.375rem;
    }
  
    .toast-error .toast-close-button:active {
      transform: scale(0.95);
    }
  
    /* Animação de saída */
    .toast-exit {
      animation: toast-slide-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
  
    @keyframes toast-slide-out {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(100%);
      }
    }
  
    /* Variantes Adicionais (Opcional) */
    .toast-info {
      @apply p-4 relative overflow-hidden;
    }
  
    .toast-info::before {
      content: "";
      @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-400 to-blue-600;
    }
  
    .toast-warning {
      @apply p-4 relative overflow-hidden;
    }
  
    .toast-warning::before {
      content: "";
      @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-amber-400 to-amber-600;
    }
  
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
      .toast-card {
        @apply bg-white ring-black/2;
      }
  
      .toast-success .toast-message,
      .toast-error .toast-message {
        @apply text-black;
      }
  
      .toast-success .toast-close-button {
        @apply bg-blue-900/30 text-blue-400 hover:bg-blue-900/50;
      }
  
      .toast-error .toast-close-button {
        @apply bg-red-900/30 text-red-400 hover:bg-red-900/50;
      }
    }
  }