/* Janelas do SweetAlert2 (confirmações e ajudas) com a cara da Janela do design system: as
   variáveis --swal2-* da biblioteca apontam para os tokens, então seguem o tema dia/noite
   do usuário. São mensagens do sistema: o botão de confirmar não segue a cor da empresa. */

div.swal2-container,
div.swal2-popup {
  --swal2-backdrop: var(--cor-cortina);
  --swal2-width: min(30rem, calc(100vw - 2rem));
  --swal2-padding: var(--espaco-300);
  --swal2-border-radius: var(--raio-grande);
  --swal2-background: var(--cor-sobreposicao);
  --swal2-color: var(--cor-texto);
  --swal2-title-padding: 0;
  --swal2-html-container-padding: var(--espaco-150) 0 0;
  --swal2-actions-justify-content: flex-end;
  --swal2-actions-width: 100%;
  --swal2-actions-margin: var(--espaco-300) 0 0;
  --swal2-outline: 0 0 0 var(--borda-largura-foco) var(--cor-foco);
  --swal2-close-button-color: var(--cor-texto-suave);
  --swal2-close-button-font-size: 1.75rem;
  --swal2-confirm-button-border-radius: var(--raio-medio);
  --swal2-confirm-button-background-color: var(--cor-sistema);
  --swal2-confirm-button-color: var(--cor-texto-inverso);
  --swal2-deny-button-border-radius: var(--raio-medio);
  --swal2-deny-button-background-color: var(--cor-superficie);
  --swal2-deny-button-color: var(--cor-texto-suave);
  --swal2-cancel-button-border-radius: var(--raio-medio);
  --swal2-cancel-button-background-color: transparent;
  --swal2-cancel-button-color: var(--cor-texto-suave);
}

div.swal2-popup { box-shadow: var(--sombra-sobreposta); font: var(--fonte-texto); text-align: left; }
div.swal2-popup h2.swal2-title { font: var(--fonte-titulo-m); color: var(--cor-texto); text-align: left; }
div.swal2-popup div.swal2-html-container { font: var(--fonte-texto); text-align: left; }
div.swal2-popup .swal2-icon { display: none !important; }  /* o título já diz do que se trata */
div.swal2-popup .swal2-actions { gap: var(--espaco-100); }
div.swal2-popup .swal2-actions button.swal2-styled {
  margin: 0;
  height: var(--altura-controle);
  padding: 0 var(--espaco-150);
  font: var(--fonte-texto);
  font-weight: var(--peso-medio);
}
div.swal2-popup button.swal2-deny { box-shadow: inset 0 0 0 var(--borda-largura) var(--cor-borda); }
div.swal2-popup .swal2-actions button.swal2-cancel:hover { background: var(--cor-bloco); }

/* Janela larga (ajudas com listas): <Swal.fire({ customClass: { popup: "dialogo-largo" } })> */
div.swal2-popup.dialogo-largo { --swal2-width: min(52rem, calc(100vw - 2rem)); }