.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;
    }
}