/**
 * Widget BRZ Marquee.
 *
 * Só carrega nas páginas que usam o widget, via get_style_depends().
 * Nada aqui assume grid, container ou variável do tema — tudo é escopado
 * em .brz-marquee, e toda custom property nasce na raiz do próprio widget.
 *
 * A folha sozinha já entrega uma faixa legível e rolável na mão. A animação
 * é acrescentada pelo JS, que mede a largura real do conteúdo e escreve
 * --brz-marquee-duration. Sem o script nada some.
 */

.brz-marquee {
	--brz-marquee-gap: 100px;
	--brz-marquee-min-height: 0px;
	--brz-marquee-rotation: 0deg;

	--brz-marquee-color: currentColor;
	--brz-marquee-color-hover: var( --brz-marquee-color );

	--brz-marquee-border-width: 0px;
	--brz-marquee-border-color: currentColor;

	/* O separador nasce numa cor derivada do texto, nunca do fundo: um
	   separador na cor do fundo é um separador invisível. */
	--brz-marquee-sep-size: 18px;
	--brz-marquee-sep-color: color-mix( in srgb, currentColor 45%, transparent );
	/* --brz-marquee-sep-radius não nasce aqui de propósito: sem valor do
	   controle, cada forma cai no próprio fallback (0 no square, 50% no
	   circle). Definida na raiz, ela vencia os dois e o square saía
	   redondo. */
	--brz-marquee-sep-rotate: 0deg;
	--brz-marquee-sep-margin: 0px;

	--brz-marquee-fade-width: 12%;

	/* Escrita pelo JS a partir da largura medida. O valor aqui é só rede de
	   segurança para o caso de o script não chegar a rodar. */
	--brz-marquee-duration: 20s;

	border-block: var( --brz-marquee-border-width ) solid var( --brz-marquee-border-color );
	color: var( --brz-marquee-color );
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var( --brz-marquee-min-height );
	position: relative;
	rotate: var( --brz-marquee-rotation );
	width: 100%;
}

/* Linha
   -----

   Sem JS a linha rola na mão: overflow-x auto em vez de hidden. Esconder o
   excedente antes de existir animação cortaria conteúdo, e conteúdo cortado
   é conteúdo perdido. O JS troca para hidden ao assumir. */

.brz-marquee__line {
	/* Explícito porque a linha sai como span quando a raiz é p ou span, e
	   overflow não vale em elemento inline. */
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	width: 100%;
}

.brz-marquee__line::-webkit-scrollbar {
	display: none;
}

.brz-marquee.is-brz-marquee-ready .brz-marquee__line {
	overflow: hidden;
}

/* Esmaecimento das bordas. Só entra com a variante ligada; navegador sem
   suporte a mask mostra a faixa inteira, o que é degradação aceitável. */

.brz-marquee--fade .brz-marquee__line {
	-webkit-mask-image: linear-gradient( to right, transparent 0%, #000 var( --brz-marquee-fade-width ), #000 calc( 100% - var( --brz-marquee-fade-width ) ), transparent 100% );
	mask-image: linear-gradient( to right, transparent 0%, #000 var( --brz-marquee-fade-width ), #000 calc( 100% - var( --brz-marquee-fade-width ) ), transparent 100% );
}

/* Trilho
   ------

   O trilho carrega os grupos lado a lado e desliza exatamente um período —
   a largura de um grupo mais o gap que o separa do seguinte. Sendo L a
   largura do trilho, N o número de grupos e g o gap:

     L = N × grupo + ( N - 1 ) × g   ⇒   grupo + g = ( L + g ) / N

   Com os dois grupos que o JS monta, isso resolve para -50% - g/2. A
   especificação pede -50% puro, que só valeria se não houvesse gap entre os
   grupos — e aí a emenda ficaria com os itens colados. */

.brz-marquee__track {
	display: flex;
	gap: var( --brz-marquee-gap );
	white-space: nowrap;
	width: max-content;
}

.brz-marquee.is-brz-marquee-ready .brz-marquee__track {
	animation: brz-marquee-slide var( --brz-marquee-duration ) linear infinite;
	will-change: transform;
}

.brz-marquee__line[data-brz-direction="right"] .brz-marquee__track {
	animation-direction: reverse;
}

/* Em RTL o eixo de leitura inverte, então "para a esquerda" precisa trocar
   de sentido para continuar significando a mesma coisa para quem lê. */

[dir="rtl"] .brz-marquee__line[data-brz-direction="left"] .brz-marquee__track {
	animation-direction: reverse;
}

[dir="rtl"] .brz-marquee__line[data-brz-direction="right"] .brz-marquee__track {
	animation-direction: normal;
}

@keyframes brz-marquee-slide {

	to {
		transform: translateX( calc( ( -100% - var( --brz-marquee-gap ) ) / var( --brz-marquee-groups, 2 ) ) );
	}
}

/* Pausa no hover e no foco. O focus-within é o que impede a faixa de
   arrastar o link para fora da tela enquanto alguém navega por teclado. */

.brz-marquee--pause:hover .brz-marquee__track,
.brz-marquee--pause:focus-within .brz-marquee__track {
	animation-play-state: paused;
}

/* Fora da tela o JS marca a faixa e a animação para, para não gastar
   composição com o que ninguém está vendo. */

.brz-marquee.is-brz-marquee-idle .brz-marquee__track {
	animation-play-state: paused;
}

/* Grupo e itens
   -------------

   O gap mora no grupo, e o trilho repete o mesmo valor entre os grupos: é o
   que faz o espaçamento na emenda ser igual ao espaçamento interno. */

.brz-marquee__group {
	align-items: center;
	display: flex;
	gap: var( --brz-marquee-gap );
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
}

.brz-marquee__item {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 0.4em;
	line-height: 1.1;
	margin: 0;
	white-space: nowrap;
}

.brz-marquee__link {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 0.4em;
	text-decoration: none;
	transition: color 0.3s ease;
}

.brz-marquee__link:hover,
.brz-marquee__link:focus-visible {
	color: var( --brz-marquee-color-hover );
}

.brz-marquee__icon {
	align-items: center;
	display: inline-flex;
	font-size: 0.8em;
}

.brz-marquee__icon svg {
	fill: currentColor;
	height: 1em;
	width: 1em;
}

/* Separador
   --------- */

.brz-marquee__sep {
	align-items: center;
	color: var( --brz-marquee-sep-color );
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	margin-inline: var( --brz-marquee-sep-margin );
	rotate: var( --brz-marquee-sep-rotate );
}

.brz-marquee__sep--square,
.brz-marquee__sep--circle {
	background-color: currentColor;
	block-size: var( --brz-marquee-sep-size );
	inline-size: var( --brz-marquee-sep-size );
}

.brz-marquee__sep--square {
	border-radius: var( --brz-marquee-sep-radius, 0 );
}

.brz-marquee__sep--circle {
	border-radius: var( --brz-marquee-sep-radius, 50% );
}

.brz-marquee__sep--icon,
.brz-marquee__sep--text {
	font-size: var( --brz-marquee-sep-size );
	line-height: 1;
}

.brz-marquee__sep--icon svg {
	fill: currentColor;
	height: 1em;
	width: 1em;
}

/* Estado vazio, só no editor
   -------------------------- */

.brz-marquee__empty {
	border: 1px dashed color-mix( in srgb, currentColor 25%, transparent );
	border-radius: 0.75rem;
	color: color-mix( in srgb, currentColor 65%, transparent );
	padding: 2rem;
	text-align: center;
}

/* Movimento reduzido
   ------------------

   Segunda camada: o JS já não anima quando o visitante pede movimento
   reduzido, mas a preferência pode mudar com a página aberta. A faixa vira
   um bloco quebrado em linhas e centralizado, e o clone sai de cena — sem
   animação ele seria só conteúdo repetido. */

@media ( prefers-reduced-motion: reduce ) {

	.brz-marquee__line,
	.brz-marquee.is-brz-marquee-ready .brz-marquee__line {
		overflow: visible;
	}

	.brz-marquee__track,
	.brz-marquee.is-brz-marquee-ready .brz-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.brz-marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.brz-marquee__group[aria-hidden="true"] {
		display: none;
	}

	.brz-marquee__link {
		transition: none;
	}
}