/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.flash {
  padding: 1rem;
  margin: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  font-weight: 500;
}

.flash-success {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #16a34a;
}

.flash-error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #dc2626;
}

.flash-alert {
  background-color: #fff7ed;
  color: #9a3412;
  border: 1px solid #ea580c;
}

.flash-notice {
  background-color: #eff6ff;
  color: #1e40af;
  border: 1px solid #3b82f6;
}

@keyframes flash-in-out {
  0% { opacity: 0; transform: translateY(-1rem); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-1rem); }
}

.animate-flash {
  animation: flash-in-out 5s ease-in-out forwards;
}