.nb-stripes-button {
padding: 0 var(--padding-right) 0 var(--padding-left);
z-index: 1;
-webkit-user-select: none;
user-select: none;
place-content: center;
display: flex;
width: fit-content;
position: relative;
cursor: pointer;
--stripes-blend-second-color: var(--background-color);
}
.nb-stripes-button__container {
z-index: 1;
padding: var(--padding-top) 0 var(--padding-bottom) 0;
position: relative;
overflow: clip;
}
.nb-stripes-button__text {
display: block;
}
.nb-stripes-button__background {
background: var(--background-color);
z-index: -1;
place-self: center;
width: 100%;
height: 100%;
padding-bottom: 0;
padding-right: 0;
position: absolute;
overflow: clip;
}
.nb-stripes-button__background::before {
content: "";
display: block;
position: absolute;
background: linear-gradient(to right, transparent, color-mix(in hsl, var(--stripes-blend-first-color), transparent 3%)), repeating-linear-gradient(var(--stripes-degree), var(--stripes-blend-first-color), var(--stripes-blend-first-color) 0.125em, var(--stripes-blend-second-color) 0.125em, var(--stripes-blend-second-color) 0.5em);
inset: 0;
animation: wonder-warp-scroll-background var(--stripes-movement-duration) var(--stripes-movement-ease) infinite;
width: 100%;
height: 100%;
transition: transform var(--stripes-translate-speed) var(--stripes-translate-ease);
}
.nb-stripes-button__background[data-from="top"]::before{
transform-origin: center top;
}
.nb-stripes-button__background[data-from="bottom"]::before{
transform-origin: center bottom;
}
.nb-stripes-button::after {
content: "";
display: block;
position: absolute;
}
@media (hover: hover) and (pointer: fine) {
.nb-stripes-button__background::before {
transform: scaleY(0);
}
.nb-stripes-button:hover .nb-stripes-button__background::before,
.nb-stripes-button:focus-visible .nb-stripes-button__background::before {
transform: scale(1);
} 
}
@keyframes wonder-warp-scroll-background {
to {
background-position-x: 0, -0.6875em;
}
}