.scroll-button::before,
.scroll-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: translate(12px 12px);
}

.scroll-button::before {
    transform: translate(0, -6px);
    opacity: 0.6;
}

.scroll-button::after {
    transform: translate(0, 6px);
    opacity: 0.4;
}

/* 添加动画效果 */
.scroll-button-down {
    animation: bounce-down 2s infinite;
}

/* 添加动画效果 */
.scroll-button-up {
    animation: bounce-up 2s infinite;
}

.scroll-container {
    &::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: 12px;
    }
}

.scroll-container-end {
    height: 100%;

    &::before {
        content: '';
        position: absolute;
        height: 90%;
        width: 100%;
        border-radius: 12px;
    }
}

.no-scroll {}

@keyframes bounce-down {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(-2px);
    }
}

@keyframes bounce-up {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(5px);
    }

    60% {
        transform: translateY(2px);
    }
}

.scroll-button:hover {
    transform: translateY(-3px);
}

.current-prize {
    position: relative;
    display: block;
    overflow: clip;
    isolation: isolate;

    border-radius: 20px;
    padding: 3px;
}

.current-prize::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 100%;
    background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    background-size: 25% 100%;
    animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
    // animation-play-state: paused;
    translate: -5% 0%;
    transition: translate 0.25s ease-out;
    animation-play-state: running;
    transition-duration: 0.75s;
    translate: 0% 0%;
}

.current-prize::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: -1;
}

@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
    to {
        transform: translateX(-25%);
    }
}