/*
 * FLASH MESSAGES
 * Responsabilidade: feedback temporário de ações (sucesso, erro, aviso).
 * Componente global reutilizável. Tipos mapeados a partir das chaves
 * de flash do Rails/Devise pelo helper flash_type_class.
 */

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  border: var(--border-width) solid transparent;
}

.flash--success {
  background-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  border-color: var(--color-accent);
  color: var(--color-text);
}

.flash--danger {
  background-color: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
  border-color: var(--color-danger);
  color: var(--color-text);
}

.flash--warning {
  background-color: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-text);
}

/*
 * TOAST — comportamento flutuante das mensagens flash.
 * O container fixa no topo-centro e empilha os toasts. Cada toast
 * entra deslizando e sai com fade (classe is-leaving, via Stimulus).
 */
.toasts {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100vw - var(--space-4) * 2);
}

/* O toast reaproveita as cores .flash--*, mas flutua com sombra. */
.toasts .flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 20rem;
  max-width: 100%;
  margin-bottom: 0;
  box-shadow: var(--shadow-md);
  /* Estado inicial e transição de entrada/saída. */
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Saída: some com fade e leve deslize para cima. */
.toasts .flash.is-leaving {
  opacity: 0;
  transform: translateY(-0.5rem);
}

/* Texto do toast ocupa o espaço; o botão fechar fica à direita. */
.toast__message {
  flex: 1;
}

.toast__close {
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  background: none;
  border: none;
}

.toast__close:hover {
  color: var(--color-text);
}