/**
 * Bricksify: Slide Button (Free widget).
 *
 * maxmilkin.com `.animation-button`: on mouseenter every letter goes
 * xPercent 0 -> 100 while its copy goes -100 -> 0, 0.9s power3.out, all
 * letters together; mouseleave plays it back. Each letter is masked by its
 * own wrapper (overflow hidden), so the label swaps in one move.
 *
 * Here it is a CSS transition on markup written server side: no script. A
 * transition reverses from wherever it is, which is what the reference's
 * gsap.to() on leave does.
 *
 * Tuning, as custom properties on the element (the panel writes the first two):
 *   --bxsb-speed    duration                                          (.9s)
 *   --bxsb-stagger  delay between letters                             (0s)
 *   --bxsb-ease     timing curve  (power3.out: cubic-bezier(.215,.61,.355,1))
 */

.bxc-slide-button {
	--bxsb-out: translate3d(100%, 0, 0);
	--bxsb-in: translate3d(-100%, 0, 0);
	cursor: pointer;
}

.bxc-slide-button[data-slide-dir="left"] {
	--bxsb-out: translate3d(-100%, 0, 0);
	--bxsb-in: translate3d(100%, 0, 0);
}

.bxc-slide-button[data-slide-dir="up"] {
	--bxsb-out: translate3d(0, -100%, 0);
	--bxsb-in: translate3d(0, 100%, 0);
}

.bxc-slide-button[data-slide-dir="down"] {
	--bxsb-out: translate3d(0, 100%, 0);
	--bxsb-in: translate3d(0, -100%, 0);
}

.bxc-slide-button .bxsb__inner {
	position: relative;
	display: block;
	overflow: hidden;
}

.bxc-slide-button .bxsb__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bxc-slide-button .bxsb__text {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}

.bxc-slide-button .bxsb__text--bottom {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.bxc-slide-button .bxsb__lw {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.bxc-slide-button .bxsb__l {
	display: inline-block;
	transform: translate3d(0, 0, 0);
	transition: transform var(--bxsb-speed, .9s) var(--bxsb-ease, cubic-bezier(.215, .61, .355, 1)) calc(var(--i, 0) * var(--bxsb-stagger, 0s));
}

.bxc-slide-button .bxsb__text--bottom .bxsb__l {
	transform: var(--bxsb-in);
}

.bxc-slide-button:is(:hover, :focus-visible) .bxsb__text--top .bxsb__l {
	transform: var(--bxsb-out);
}

.bxc-slide-button:is(:hover, :focus-visible) .bxsb__text--bottom .bxsb__l {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.bxc-slide-button .bxsb__l {
		transition: none;
	}
}