/* ==========================================================================
   Botão "Compartilhar" — Views/Shared/Partials/_BotaoCompartilhar.cshtml

   CSS puro, sem passar pelo compilador SASS. Usa os tokens de tokens.css e as
   fontes de :root (--font-primary), então precisa ser carregado depois deles.
   As regras equivalentes foram removidas de _button.sass e site.sass, onde
   .button-compartilhar estava duplicado byte a byte nos dois arquivos.
   ========================================================================== */

/* Cabeçalho de página: título à esquerda, botão de compartilhar no canto
   superior direito. Até aqui .menu-header não tinha nenhuma regra e o
   alinhamento vinha só do .d-flex do Bootstrap, o que deixava o botão colado
   no título.

   O margin-bottom afasta o cabeçalho do <hr> que vem logo abaixo: nas telas
   que usam .menu-header o traço é o de _CabecalhoDemanda.cshtml, que tem m-0 e
   portanto não reserva espaço nenhum acima de si. Os demais cabeçalhos do
   sistema resolvem isso no próprio <hr> (`m-0 mt-2`) e não usam esta classe. */
.menu-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.button-compartilhar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cor-branca);
    border: 1px solid var(--cor-roxa);
    border-radius: 5px;
    color: var(--cor-roxa);
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: bold;
    padding: 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: 5px;

    &:hover {
        background-color: var(--cor-roxa);
        border: 1px solid var(--cor-roxa);
        color: var(--cor-branca);
    }
}

.text-compartilhar {
    display: block;
}

.menu-compartilhar {
    font-family: var(--font-primary);
    border-radius: 5px;
}

.item-menu-compartilhar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-primary);
    color: var(--cor-roxa);
    font-size: medium;

    /* O transform do hover cresce a partir da borda esquerda para o item não
       encostar na borda do menu. */
    transform-origin: left center;

    /* O ícone não recebe o clique: os handlers de compartilhamento leem
       event.target.dataset (ex: js/ordemDeServico/export.mjs), então o alvo do
       clique tem que ser sempre o próprio botão, nunca o <i> de dentro dele. */
    > i {
        pointer-events: none;
    }

    &:hover {
        background-color: transparent;
        color: var(--cor-roxa);
        transform: scale(1.1, 1.1);
    }
}

.menu-divider {
    color: var(--cor-roxa);
    opacity: 0.2;
}

@media screen and (max-width: 460px) {
    .text-compartilhar {
        display: none;
    }
}