

.xn-marquee-button-v2[data-xn-hide]{
opacity: 0;
}
background: #fff; 
border-radius: 100px; 
--background-duration: 0.25s; 
--background-delay: 0s; 
--marquee-translate-duration: 0.75s; 
--marquee-translate-delay: 0s; 
--marquee-easing: linear; 
--swap-easing: ease-out; 
}
.xn-marquee-button-v2__wrapper{
overflow: hidden;
position: relative;
}
.xn-marquee-button-v2__marquee{
position: relative;
display: flex;
transition: translate var(--marquee-translate-duration) var(--marquee-translate-easing) var(--marquee-translate-delay); 
animation: marquee-button-v2-animation var(--marquee-speed) var(--marquee-easing) 0s infinite; 
}
.xn-marquee-button-v2__marquee > span{
color: #000; 
}
.xn-marquee-button-v2__marquee > span:nth-child(2){
position: absolute;
left: calc(100% + var(--gap)); 
}
@keyframes marquee-button-v2-animation {
100% {
transform: translateX(calc(-100% - var(--gap))); 
}
}
.xn-marquee-button-v2__swap{
position: absolute;
top: 0;
left: 50%;
height: 100%;
transform: translateX(-50%);
color: #fff; 
}
.xn-marquee-button-v2[data-type=line] .xn-marquee-button-v2__swap .xn-marquee-button-v2__swap-line,
.xn-marquee-button-v2[data-type=words] .xn-marquee-button-v2__swap .xn-marquee-button-v2__swap-word,
.xn-marquee-button-v2[data-type=chars] .xn-marquee-button-v2__swap .xn-marquee-button-v2__swap-letter{
position: relative;
top: 100%;
transition: top var(--swap-duration) var(--swap-easing) var(--swap-delay);
}
.xn-marquee-button-v2:hover{
--background-hover: #000;
background: var(--background-hover) !important;
}
.xn-marquee-button-v2:hover .xn-marquee-button-v2__marquee{
translate: 0 -100%;
opacity: 0;
}
.xn-marquee-button-v2[data-type=line]:hover .xn-marquee-button-v2__swap .xn-marquee-button-v2__swap-line,
.xn-marquee-button-v2[data-type=words]:hover .xn-marquee-button-v2__swap .xn-marquee-button-v2__swap-word,
.xn-marquee-button-v2[data-type=chars]:hover .xn-marquee-button-v2__swap .xn-marquee-button-v2__swap-letter{
top: 0;
}