/* ==UserStyle==
@name         Upvote Animation for reddit
@version      20230723.01.45
@namespace    userstyles.world/user/dantelin2009
@description  Adds a fun upvote animation to reddit
@author       dantelin2009
@license      Creative Commons Attribution Share Alike 4.0 International
==/UserStyle== */

@-moz-document domain("reddit.com") {
.icon-upvote_fill::before {
    animation: upvotenew 0.6s linear;
    text-align: center;
    position: absolute;
    display: block;
    left: -10px;
    transform-origin: center bottom;
    bottom: -21px;
}

@keyframes upvotenew {
    0% {
        bottom: -21px;
        transform: scale(1, 1);
    }
    15% {
        transform: scale(0.7, 1.9);
    }
    20% {
        bottom: -10px;
        transform: scale(0.6, 1.9);
    }
    40% {
        transform: scale(0.7, 1.9);
    }
    60% {
        bottom: -21px;
        transform: scale(1.2, 0.4);
    }
    80% {
        transform: scale(1, 0.8);
    }
    100% {
        bottom: -21px;
        transform: scale(1, 1);
    }
}

@keyframes upvote {
    0% {
        bottom: -21px;
        transform: scale(1, 1);
    }
    15% {
        transform: scale(0.6, 2);
    }
    20% {
        bottom: -10px;
        transform: scale(0.5, 2);
    }
    40% {
        transform: scale(0.6, 2);
    }
    60% {
        bottom: -21px;
        transform: scale(1.2, 0.4);
    }
    80% {
        transform: scale(1, 0.8);
    }
    100% {
        bottom: -21px;
        transform: scale(1, 1);
    }
}

.icon-downvote_fill::before {
    animation: downvote 0.7s ease-in-out;
    text-align: center;
    position: absolute;
    display: block;
    left: -10px;
    transform-origin: center bottom;
    bottom: -21px;
}

@keyframes downvote {
    0% {
        bottom: -21px;
        transform: scale(1, 1);
    }
    20%{
        transform: scale(0.6, 2);
    }
    30% {
        bottom: -69px;
    }
    30.001% {
        bottom: 27px;
    }
    60% {
        bottom: -21px;
        transform: scale(1.2, 0.4);
    }
    80% {
        transform: scale(1, 0.8);
    }
    100% {
        bottom: -21px;
        transform: scale(1, 1);
    }
}

.voteButton,
._3SUsITjKNQ7Tp0Wi2jGxIM.qW0l8Af61EP35WIG6vnGk,
._1RYN-7H8gYctjOQeL8p2Q7 {
    overflow: visible;
}
}