@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";

.mouseDown {
    border: 3px solid $white;
    width: 30px;
    height: 55px;
    border-radius: 30px;

    span {
        background: $white;
        width: 5px;
        height: 5px;
        margin: 0 auto;
        border-radius: 50%;
        animation: scroll 3s cubic-bezier(0.65, -0.55, 0.25, 1.5) infinite;
    }
}

@keyframes scroll {
    0%, 20% {
        transform: translateY(-10px) scaleY(1);
    }
    10% {
        opacity: 1;
    }
    80% {
        transform: translateY(10px);
        opacity: 1;
    }
    100% {
        transform: translateY(0px) scaleY(1.5);
        opacity: 0.01;
    }
}