.mensagem {
  @include borda-arredondada-padrao;
  display: flex;
  position: relative;
  background-color: scale-color($cor-info, $lightness: 96%);
  border: 2px solid $cor-info;
  align-items: center;
  padding: 16px;
  margin-top: 16px;
  @include quebra-somente-telefone {
    padding: 16px;
  }
}

.mensagens-flutuantes {
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 16px;
  margin: 0;
  z-index: 10000;
  width: 560px;
  @include quebra-somente-telefone {
    width: 100%;
  }
  .mensagem {
    box-shadow: 4px 0 24px rgba($cor-preta, 0.3);
    width: 100%;
    padding-right: 48px;
    transform: translate(720px, 0px);
  }
}

.mensagem_ativa {
  animation: mover-mensagem 0.3s;
  display: flex;
  transform: translate(0, 0px) !important;
  @include quebra-somente-telefone {
    animation: mover-mensagem-somente-telefone 0.3s;
  }
}

.mensagem_inativa {
  animation: remover-mensagem 0.5s;
  transform: translate(720px, 0px);
  @include quebra-somente-telefone {
    animation: remover-mensagem-somente-telefone 0.5s;
  }
}

@keyframes remover-mensagem {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(720px, 0px);
  }
}

@keyframes remover-mensagem-somente-telefone {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 720px);
  }
}

@keyframes mover-mensagem {
  0% {
    transform: translate(720px, 0px);
  }
  75% {
    transform: translate(-4px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes mover-mensagem-somente-telefone {
  0% {
    transform: translate(0, 600px);
  }
  75% {
    transform: translate(0, -4px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.mensagem__icone {
  display: flex !important;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  margin-bottom: 8px;
  width: 32px;
  font-size: 32px;
  color: $cor-info;
  text-align: center;
  margin-right: 16px;

  @include quebra-maior-que-telefone {
    margin-bottom: 0;
  }
}

.mensagem__botao-fechar {
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba($cor-preta, 0.2);
  outline: 0;
  height: 48px;
  min-width: 48px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover,
  &:focus {
    color: $cor-info;
  }
  .mensagem__icone-botao {
    pointer-events: none;
  }
}

.mensagem__titulo {
  @include resetar-titulo;
  @include fonte-negrito;
  margin-bottom: 4px;
  font-size: 18px;
  color: $cor-info;
}

.mensagem__texto {
  @include resetar-paragrafo;
  color: $cor-cinza-80;
  font-size: 16px;
  @include quebra-somente-telefone {
    margin: 0;
  }
}

$cores-mensagens: (cor-info, $cor-info), (cor-erro, $cor-erro), (cor-sucesso, $cor-sucesso), (cor-atencao, $cor-atencao);
@each $nome, $cor in $cores-mensagens {
  .mensagem_#{$nome} {
    background-color: scale-color($cor, $lightness: 96%);
    border-color: rgba($cor, 0.5);
    .mensagem__botao-fechar {
      &:hover,
      &:focus {
        color: $cor;
      }
    }
    .mensagem__icone {
      color: $cor;
    }
    .mensagem__titulo {
      color: $cor;
    }
  }
}