@layer components {
/* Alert component — flash messages and inline notices */

.alert {
  position: absolute;
  top: 20px;
  border-radius: 4px;
  padding: 1rem;
  animation: appear-then-fade 3s 400ms both;
  margin-right: 1rem;
}

.alert--success {
  background-color: var(--success-color);
  color: var(--success-color-text);
}

.alert--danger {
  background-color: var(--error);
  color: white;
}

.alert--warning {
  background-color: var(--warning-color);
  color: var(--warning-color-text);
}

.alert--info {
  background-color: var(--primary-100);
  color: var(--primary-800);
}

/* Inline alert — not floating, used inside forms */
.alert--inline {
  position: static;
  animation: none;
  margin-bottom: 1rem;
}

/* Model validation errors block */
.errors {
  background-color: var(--warning-color);
  padding: 1em;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  color: var(--warning-color-text);
  margin-bottom: 2rem;
}

@keyframes appear-then-fade {
  0%, 100% { opacity: 0; }
  5%, 60% { opacity: 1; }
}
}