/* Mensagem na página (Atlassian Section message). Tons: info, aviso, perigo, sucesso, novo.
   <c-mensagem tom="aviso" titulo="Confira o desenho">texto</c-mensagem> */

.ds-mensagem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espaco-200);
  padding: var(--espaco-200);
  border-radius: var(--raio-medio);
  background: var(--cor-info-fundo);
  --cor-do-icone: var(--cor-info);
}
.ds-mensagem__icone { color: var(--cor-do-icone); }
.ds-mensagem__titulo { font: var(--fonte-titulo-pp); margin: 0 0 var(--espaco-050); }
.ds-mensagem__conteudo > :last-child { margin-bottom: 0; }
.ds-mensagem--aviso { background: var(--cor-aviso-fundo); --cor-do-icone: var(--cor-aviso-texto); }
.ds-mensagem--perigo { background: var(--cor-perigo-fundo); --cor-do-icone: var(--cor-perigo); }
.ds-mensagem--sucesso { background: var(--cor-sucesso-fundo); --cor-do-icone: var(--cor-sucesso); }
.ds-mensagem--novo { background: var(--cor-novo-fundo); --cor-do-icone: var(--cor-novo); }