.scroll-mouse {
    --scroll-mouse-color: #ffffff;
    --scroll-mouse-wheel-color: var(--color-accent);
    --scroll-mouse-width: 21px;
    --scroll-mouse-height: 38px;
    --scroll-mouse-border: 1px;
    --scroll-mouse-wheel: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    margin-inline: auto;
}

.product-page .scroll-mouse{
    --scroll-mouse-color: #000000;
    top: -100px;
    position: relative;
}

.scroll-mouse__mouse {
    position: relative;
    width: var(--scroll-mouse-width);
    height: var(--scroll-mouse-height);
    border: var(--scroll-mouse-border) solid var(--scroll-mouse-color);
    border-radius: 999px;
    opacity: .6;
}

.scroll-mouse__mouse::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: var(--scroll-mouse-wheel);
    height: var(--scroll-mouse-wheel);
    background-color: var(--scroll-mouse-wheel-color);
    border-radius: 50%;
    opacity: 1;
    transform: translateX(-50%);
    animation: scroll-mouse-wheel 2s infinite;
}

.hero-banner .scroll-mouse {
    position: absolute;
    top: calc(80% - 28px);
    left: 50%;
    z-index: 50;
    transform: translate(-50%, -50%);
}

@keyframes scroll-mouse-wheel {
    0% {
        top: 6px;
        opacity: 1;
        background-color: var(--scroll-mouse-color);
    }

    50% {
        background-color: var(--scroll-mouse-wheel-color);
    }

    100% {
        top: 31px;
        opacity: 0;
        background-color: var(--scroll-mouse-wheel-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-mouse__mouse::before {
        animation: none;
        opacity: 1;
    }
}