/* ------------------------------------------------------------------
   O menu dos tres pontinhos do card (js/post-menu.js).

   Duas opcoes, e so para quem escreveu o post: fixar no topo do perfil
   e excluir. Excluir apaga de verdade — a linha, as fotos e os arquivos
   no armazenamento —, e por isso passa por um dialogo: nao ha desfazer.
   O dialogo em si e o css/confirmar.css, que quem declara este arquivo
   declara junto.

   O menu e `fixed` e mora no `body`, e nao dentro do card: o
   `.feed-post` corta o que passa da borda (css/feed.css, `overflow:
   hidden`), e num post de uma linha so metade das opcoes ficaria fora
   da vista.
   ------------------------------------------------------------------ */

.post-menu {
  position: fixed;
  /* Acima do card e da barra do topo, abaixo do dialogo (z-index 80 em
     css/conexao-pedido.css) — um menu por cima de uma janela modal
     seria um menu que a janela nao consegue cobrir. */
  z-index: 60;
  min-width: 13.5rem;
  padding: .375rem;
  border-radius: .75rem;
  border: 1px solid rgb(var(--color-outline-variant));
  background: rgb(var(--color-surface-container-lowest));
  box-shadow: 0 .75rem 2rem -.5rem rgb(0 0 0 / .35);
}
.post-menu[hidden] { display: none; }

.post-menu-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .5rem .625rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  color: rgb(var(--color-on-surface));
  cursor: pointer;
  transition: background-color .12s;
}
.post-menu-item:hover { background: rgb(var(--color-surface-container)); }
.post-menu-item:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: -2px;
}

.post-menu-item .material-symbols-outlined {
  font-size: 1.25rem;
  color: rgb(var(--color-on-surface-variant));
}

/* Excluir e vermelho porque e o unico item que nao volta atras. As
   cores so entram no texto e no icone: um item inteiro pintado de
   vermelho pareceria um aviso de erro dentro do menu. */
.post-menu-item-perigo,
.post-menu-item-perigo .material-symbols-outlined { color: rgb(var(--color-error)); }
.post-menu-item-perigo:hover { background: rgb(var(--color-error) / .1); }

/* A etiqueta "Fixado" na linha de baixo do nome, so na aba
   Publicacoes. No feed da Home o post fixado entra na ordem normal, e
   um "Fixado" ali prometeria um topo que aquela tela nao tem. */
.post-menu-selo {
  display: inline-flex;
  align-items: center;
  gap: .1875rem;
  font-weight: 600;
  color: rgb(var(--color-secondary));
}
.post-menu-selo .material-symbols-outlined {
  font-size: .875rem;
  /* O alfinete de cabeca para baixo e o desenho de "preso aqui"; em pe
     ele parece um balao. */
  transform: rotate(45deg);
}

/* A caixa de confirmar mudou de casa: css/confirmar.css. Excluir
   publicacao era a unica acao sem desfazer do sistema; deixou de ser
   quando desfazer conexao apareceu, e duas caixas parecidas em
   arquivos diferentes divergem no primeiro ajuste. */

@media (prefers-reduced-motion: reduce) {
  .post-menu-item { transition: none; }
}