/* Avisos: mensagens rápidas que aparecem no canto da tela e somem sozinhas.
   Do servidor: flash("Texto.", "sucesso") vira aviso (templates/componentes/_avisos.html).
   Do JS: Legado.avisar({titulo, texto, tipo}) (js/componentes/aviso.js).
   Tipos: sucesso, erro, alerta, info. */

.avisos {
  position: fixed;
  right: var(--espaco-5);
  bottom: var(--espaco-5);
  z-index: var(--camada-aviso);
  display: grid;
  gap: var(--espaco-2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.aviso {
  --aviso-cor: var(--cor-info);

  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--espaco-3);
  padding: 14px 12px 16px 14px;
  overflow: hidden;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3);
  pointer-events: auto;
  animation: aviso-entrar var(--duracao-4) var(--curva-saida);
}

.aviso[data-saindo] {
  animation: aviso-sair var(--duracao-3) var(--curva-padrao) forwards;
}

.aviso--sucesso {
  --aviso-cor: var(--cor-sucesso);
}

.aviso--erro {
  --aviso-cor: var(--cor-erro);
}

.aviso--alerta {
  --aviso-cor: var(--cor-alerta);
}

.aviso__icone {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--aviso-cor);
  background: color-mix(in srgb, var(--aviso-cor) 14%, transparent);
  border-radius: 50%;
}

.aviso__icone .icone {
  width: 16px;
  height: 16px;
}

.aviso__titulo {
  font-size: var(--texto-sm);
  font-weight: 650;
  line-height: 1.35;
}

.aviso__texto {
  margin-top: 2px;
  font-size: var(--texto-sm);
  line-height: 1.45;
  color: var(--cor-texto-secundario);
}

.aviso__fechar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--cor-texto-suave);
  background: transparent;
  border: 0;
  border-radius: var(--raio-2);
}

.aviso__fechar:hover {
  color: var(--cor-texto);
  background: var(--cor-realce);
}

.aviso__fechar .icone {
  width: 16px;
  height: 16px;
}

/* Barra do tempo que falta; para quando o mouse está em cima. */
.aviso__tempo {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--aviso-cor);
  transform-origin: left;
  animation: aviso-tempo var(--aviso-duracao, 6000ms) linear forwards;
}

.aviso:hover .aviso__tempo {
  animation-play-state: paused;
}

@keyframes aviso-entrar {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}

@keyframes aviso-sair {
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes aviso-tempo {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 600px) {
  .avisos {
    top: calc(var(--altura-topo) + var(--espaco-2));
    right: 16px;
    bottom: auto;
  }
}