@layer components {
/* Alerts and flash messages */

.errors {
  background-color: var(--warning-color);
  padding: 1em;
  display: flex;
  flex-direction: column;
  border-radius: .5rem;
  color: var(--warning-color-text);
  margin-bottom: 2rem;
}

.warning {
  color: var(--warning);
  font-size: 120%;
}

.alert {
  position: absolute;
  top: 20px;
  background-color: var(--warning-color);
  border-radius: 0.5rem;
  padding: 1rem;
  animation: appear-then-fade 3s 400ms both;
  margin-right: 1rem;
}

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

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

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