/**
 * Estilos das notificações do portal: faixa de sucesso e faixa de falha, com o
 * respectivo ícone gerado em ::after.
 *
 * Responsabilidades:
 * - Estilizar as mensagens de sucesso e de erro exibidas ao cliente.
 *
 * CSS puro, editado à mão: o portal não tem Sass nem build do Tailwind. Depois
 * de editar, rode build-css.sh e comite o public/css/app.css gerado.
 *
 * @package Portal\Recursos\CSS
 * @llmdoc A posição deste arquivo na cascata está declarada em build-css.sh;
 *         não reordenar.
 */
.notification-success {
  background: #E0FFF0;
  mix-blend-mode: multiply;
  border: 1px solid #00FF83;
  box-sizing: border-box;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  display: flex;
  align-items: center;
  letter-spacing: 0.2px;
  color: #002312;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 23px;
}

.notification-success::after {
  background: url("../svg/checkmark-green.svg") no-repeat;
  content: "";
  width: 20px;
  height: 15px;
  transition: all 300ms ease-in-out;
}

.notification-fail {
  background: #FEFFE4;
  mix-blend-mode: multiply;
  border: 1px solid #FBFE51;
  box-sizing: border-box;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  display: flex;
  align-items: center;
  letter-spacing: 0.2px;
  color: #391A07;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 23px;
}

.notification-fail::after {
  background: url("../svg/alert-yellow.svg") no-repeat;
  content: "";
  width: 20px;
  height: 15px;
  transition: all 300ms ease-in-out;
}