/**
 * WoP-Botão - CSS estrutural fixo (layout do ícone, transições).
 * TODOS os atributos de estilo visual - cor de texto/preenchimento/borda
 * (normal e hover), tipografia, raio da borda, espessura da borda por
 * aresta e padding por lado - são geridos em WEM > Configurar e gerados
 * dinamicamente por WEM_Botao_Settings::generate_css(), injetado logo a
 * seguir a esta folha de estilos (por isso têm sempre prioridade sobre
 * qualquer valor aqui).
 */

.wem-botao {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	border-style: solid; /* necessário para as espessuras por aresta (definidas dinamicamente) alguma vez aparecerem */
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
	/* Reset dos estilos nativos do browser para <button> (variantes de
	   botão) - o <a> (variante Link) já não tem nenhum destes por omissão,
	   por isso as regras abaixo são inofensivas para essa variante. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0;
	font: inherit;
	text-align: inherit;
}

.wem-botao__content {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.wem-botao__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	transition: transform 0.15s ease;
}

/* O seletor de ícones do Elementor pode devolver um <svg> em linha (ex.:
   ícones Font Awesome desenhados como SVG, em vez da tag <i> de fonte de
   ícones) - esse <svg> não tem largura/altura próprias (só "viewBox"), por
   isso sem isto ficava com tamanho 0x0 (o ícone "desaparecia", mesmo
   estando presente no HTML). 1em acompanha o tamanho do texto do botão,
   tal como o Elementor faz nos seus próprios widgets com ícones. Ícones de
   fonte (<i class="...">) não são afetados por esta regra - o tamanho
   deles já vem do tamanho da letra. */
.wem-botao__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.wem-botao:hover .wem-botao__icon,
.wem-botao:focus .wem-botao__icon {
	transform: translateX(3px);
}

/* Ícone antes do texto (à esquerda) - o pequeno deslize no hover/focus deve
   apontar para o lado oposto (esquerda), senão o ícone deslizaria "para
   dentro" do texto em vez de se afastar dele. */
.wem-botao--icon-antes:hover .wem-botao__icon,
.wem-botao--icon-antes:focus .wem-botao__icon {
	transform: translateX(-3px);
}

/* Acessibilidade (WCAG 2.3.3) - quem tiver "reduzir movimento" ativo no
   sistema operativo deixa de ver a seta a deslizar no hover/focus. */
@media (prefers-reduced-motion: reduce) {
	.wem-botao__icon {
		transition: none;
	}
	.wem-botao:hover .wem-botao__icon,
	.wem-botao:focus .wem-botao__icon,
	.wem-botao--icon-antes:hover .wem-botao__icon,
	.wem-botao--icon-antes:focus .wem-botao__icon {
		transform: none;
	}
}

/* Variantes "- Light" (Link/Botões brancos, para fundos escuros ou imagens -
   pedido do Emanuel: "Tem apenas uma cor o button-light-color (#fff)"). A cor
   normal e a cor de hover/focus são ambas configuráveis em WEM > Configurar >
   WoP-Botão (ver .wem-botao.wem-botao--{variante}-light:hover/:focus em
   class-wem-botao-settings.php::generate_css()); nada de estrutural é
   necessário aqui além da transition já definida na regra base .wem-botao.
*/

/* Acessibilidade (WCAG 2.4.7 - Foco Visível) - o reset "appearance: none"
   acima pode remover o anel de foco nativo do browser em alguns navegadores
   (sobretudo nas variantes <button>) - garante-se aqui, explicitamente, um
   indicador de foco sempre visível por teclado. */
.wem-botao:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Texto só para leitores de ecrã (ex.: aviso "abre em nova aba" nas
   variantes <button>, que não têm target/rel nativos para o comunicar). */
.wem-botao__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Tipografia fixa por omissão - substituída pelo bloco dinâmico sempre que
   há uma Tipografia Global vinculada em WEM > Configurar.
   Seletor duplicado ".wem-botao.wem-botao" DE PROPÓSITO (não é engano): o
   Elementor imprime, para todo o site, um estilo "Botão" por omissão do Kit
   ativo com o seletor ".elementor-kit-N button" (especificidade 0-1-1), que
   vence uma única classe (0-1-0) - sem duplicar a classe aqui (0-2-0), esta
   tipografia fixa ficava sempre substituída pela tipografia global de botão
   do Elementor nas 3 variantes que usam <button> (o "Link" usa <a>, por
   isso não sofre disto). Mesmo ficheiro/lógica em
   WEM_Botao_Settings::generate_css() para o CSS dinâmico. */
.wem-botao.wem-botao {
	font-family: Soho, sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.2;
}