/* ==UserStyle==
@name           Element emoji animation
@namespace      bkil.hu
@version        2022.06.26
@description    Mostly just as a proof of concept for these: 🤣🤷😄👅☝️☔️💗
@author         bkil
==/UserStyle== */
@-moz-document domain("app.element.io"),
url-prefix("https://riot."), url-prefix("https://matrix."), url-prefix("https://element.") {
    @keyframes r {
        25% { transform: rotate(-15deg); }
        75% { transform: rotate(15deg); }
        100% { transform: rotate(0deg); }
    }

    @keyframes s {
        25% { transform: skewY(-5deg); }
        75% { transform: skewY(5deg); }
        100% { transform: skewY(0deg); }
    }

    @keyframes vs {
        50% { transform: scaleY(1.1); }
    }

    @keyframes z {
        50% { transform: scale(1.1); }
    }

    @keyframes vt {
        50% { transform: translateY(0.1em); }
    }

    @keyframes a {
        50% { opacity: 0; }
    }

    .mx_EventTile .mx_Emoji {
        line-height: 1em;
        font-size: xx-large;
        margin: 0.1em;
        background-color: white;
    }

    .mx_Emoji::before {
        animation-duration: 1s;
        animation-iteration-count: infinite;
        position: absolute;
        padding: 1px;
        background-color: white;
    }

    .markdown-body pre code {
        position: relative;
    }

    [title=":rolling_on_the_floor_laughing:"]::before {
        content: "🤣";
        animation-name: r;
    }

    [title=":shrug:"]::before {
        content: "🤷";
        animation-name: s;
    }

    [title=":smile:"]::before {
        content: "😄";
        animation-name: vs;
    }

    [title=":tongue:"]::before {
        content: "👅";
        animation-name: vs;
    }

    [title=":point_up:"]::before {
        content: "☝️";
        animation-name: vt;
    }

    [title=":umbrella_with_rain_drops:"]::before {
        content: "☂️";
        animation-name: a;
    }

    [title=":heartpulse:"]::before {
        content: "💗";
        animation-name: z;
    }

    .mx_EventTile:not(:hover) .mx_Emoji::before {
        content: initial;
    }

    /*
    animation-timing-function: jump-end;
    transform: translateX(15px);
    */
}