/**
 * Efeito 21BRZ do Botão do Elementor: preenchimento que sobe e texto que rola.
 *
 * Reproduz o .rr-btn do tema Redox sem mexer no markup do Elementor:
 *
 *   - o preenchimento é um ::before que cresce de baixo, atrás do texto;
 *   - a cópia do texto que entra por baixo é um text-shadow deslocado
 *     1.5em, na cor do hover, e o wrapper do conteúdo corta o que sobra;
 *   - no hover o texto sobe 1.5em: a original sai por cima e a sombra
 *     ocupa o lugar dela.
 *
 * O botão fica com a cor normal do texto também no hover — quem traz a cor
 * de hover é a sombra. Por isso a cor de hover do próprio Botão deve ficar
 * vazia quando o efeito está ligado.
 *
 * @package Brz_Elements
 * @since   1.4.0
 */

.brze-btn-fx-roll .elementor-button {
	position: relative;
	z-index: 0;
	overflow: hidden;
	transition: border-color 0.5s;
}

.brze-btn-fx-roll .elementor-button::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: -1;
	height: 0;
	background-color: var(--brze-fx-fill, #111111);
	transition: height 0.5s;
}

.brze-btn-fx-roll .elementor-button-content-wrapper {
	overflow: hidden;
}

.brze-btn-fx-roll .elementor-button-text {
	display: inline-block;
	text-shadow: 0 1.5em 0 var(--brze-fx-text, #ffffff);
	transition: transform 0.5s;
}

.brze-btn-fx-roll .elementor-button:hover::before,
.brze-btn-fx-roll .elementor-button:focus-visible::before {
	height: 100%;
}

.brze-btn-fx-roll .elementor-button:hover .elementor-button-text,
.brze-btn-fx-roll .elementor-button:focus-visible .elementor-button-text {
	transform: translateY(-1.5em);
}

@media (prefers-reduced-motion: reduce) {
	.brze-btn-fx-roll .elementor-button,
	.brze-btn-fx-roll .elementor-button::before,
	.brze-btn-fx-roll .elementor-button-text {
		transition: none;
	}
}