/* Barra do topo das telas logadas — a aparencia dos icones da direita.
   Par do js/app-header.js: o modulo injeta a marcacao, este arquivo da a aparencia.

   Morava no home-corretor.css, e por isso a tela de Conexoes — a unica com barra do topo que
   nao carregava aquele arquivo — mostrava os numeros de Oportunidades e Notificacoes soltos
   embaixo dos icones em vez de virarem bolinha no canto deles: sem o `position: absolute`
   daqui, o numero volta para o fluxo normal. Foi o mesmo tipo de esquecimento que deixou
   aquela tela sem o menu da conta. O CSS de quem aparece em toda tela logada nao pode viver
   dentro do arquivo de uma tela so.

   Quem escreve `data-app-header` no HTML declara este <link> junto. */

.app-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: rgb(var(--color-on-surface-variant));
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-icon-btn:hover {
  background: rgb(var(--color-surface-container));
  color: rgb(var(--color-secondary));
}

.app-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgb(var(--color-error));
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

/* As duas cores proprias do alvo e do sino.

   Sao os unicos dois icones coloridos da barra, e e isso que os faz serem achados sem
   procura: todo o resto do cabecalho e monocromatico. Ficam aqui, e nao no styles.css,
   porque quem as usa e so este par de botoes.

   Dois tons cada um, porque a mesma cor nao serve aos dois fundos: o ambar que brilha no
   branco some no cinza-escuro, e o coral que funciona no escuro fica lavado no claro. */
:root {
  --color-aviso-alvo: 214 76 50;
  /* Um tom mais fechado que o amarelo do tema escuro, e nao por gosto: sobre o branco da
     barra, o amarelo aberto fica em 2,6 de contraste, abaixo dos 3,0 que um icone precisa
     para ser visto por quem enxerga pouco. Este dourado da 3,1 e continua quente. */
  --color-aviso-sino: 202 132 0;
}

html.dark {
  --color-aviso-alvo: 255 145 116;
  --color-aviso-sino: 255 199 89;
}

/* Preenchidos, e nao contornados como o resto da barra: um alvo vazado de 24px vira tres
   circulos finos e some, e um sino vazado nao le como sino. */
.app-icon-alvo,
.app-icon-sino {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.app-icon-alvo {
  color: rgb(var(--color-aviso-alvo));
}

.app-icon-sino {
  color: rgb(var(--color-aviso-sino));
}

/* O hover do botao troca a cor do texto, e os dois icones teriam de perder a sua para
   obedece-lo. Aqui eles a mantem: quem responde pelo hover e o fundo do botao. */
.app-icon-btn:hover .app-icon-alvo {
  color: rgb(var(--color-aviso-alvo));
}

.app-icon-btn:hover .app-icon-sino {
  color: rgb(var(--color-aviso-sino));
}