@import './var.scss';

:root {
    --scroll-pulldown-bg: #{$scroll-pulldown-bg};
    --scroll-pulldown-height: #{$scroll-pulldown-height};
    --scroll-pullup-height: #{$scroll-pullup-height};
    --scroll-pullup-width-img: #{$scroll-pullup-width-img};
    --scroll-pullup-height-img: #{$scroll-pullup-height-img};
}

.jing-scroll {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    &__pulldown {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    &__pullup {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        color: var(--scroll-pulldown-bg);
        backface-visibility: hidden;
        transform-style: preserve-3d;
        width: 100%;
        height: var(--scroll-pulldown-height);
        margin-left: -0.5rem;
        text-align: center;
        &--before {
            display: flex;
            justify-content: center;
            align-items: center;
            height: var(--scroll-pullup-height);
            img {
                width: var(--scroll-pullup-width-img);
                height: var(--scroll-pullup-height-img);
                transition: all 0.3s ease-out;
            }
            span {
                width: 80px;
                line-height: 30px;
                padding: 5px 0;
                font-size: var(--font-size-xs);
                text-align: center;
            }
        }
        &--after {
            height: 50px;
            line-height: 50px;
            color: var(--color-black-1);
            font-size: var(--font-size-xs);
        }
        &--loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            img {
                width: 30px;
                height: 30px;
                animation: pullUpLoading 1s linear infinite;
            }
            span {
                width: 80px;
                line-height: 30px;
                padding: 5px 0;
                font-size: var(--font-size-xs);
                text-align: center;
            }
        }
    }
}

@keyframes pullUpLoading {
    0.000% {
        transform: rotate(0deg);
    }
    8.300% {
        transform: rotate(0deg);
    }
    8.310% {
        transform: rotate(30deg);
    }
    16.60% {
        transform: rotate(30deg);
    }
    16.61% {
        transform: rotate(60deg);
    }
    24.90% {
        transform: rotate(60deg);
    }
    24.91% {
        transform: rotate(90deg);
    }
    33.30% {
        transform: rotate(90deg);
    }
    33.31% {
        transform: rotate(120deg);
    }
    41.60% {
        transform: rotate(120deg);
    }
    41.61% {
        transform: rotate(150deg);
    }
    49.80% {
        transform: rotate(150deg);
    }
    49.81% {
        transform: rotate(180deg);
    }
    58.20% {
        transform: rotate(180deg);
    }
    58.21% {
        transform: rotate(210deg);
    }
    66.50% {
        transform: rotate(210deg);
    }
    66.51% {
        transform: rotate(240deg);
    }
    74.80% {
        transform: rotate(240deg);
    }
    74.81% {
        transform: rotate(270deg);
    }
    83.10% {
        transform: rotate(270deg);
    }
    83.11% {
        transform: rotate(300deg);
    }
    91.50% {
        transform: rotate(300deg);
    }
    91.51% {
        transform: rotate(330deg);
    }
    100.0% {
        transform: rotate(330deg);
    }
}