web/frontend/src/pages/chat/css/_animations.scss

@use "../../../css/colors" as *;
@use "../../../css/material" as *;
@use "sass:color";

// Animation for reactions appearing/disappearing
@keyframes messageReactionsFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reactionFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes reactionFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

// Context menu wrapper animations
@keyframes contextMenuEnter {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes contextMenuEnterLeft {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes contextMenuEnterUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes contextMenuEnterUpLeft {
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes contextMenuClose {
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes contextMenuCloseLeft {
    to {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }
}

@keyframes contextMenuCloseUp {
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
}

@keyframes contextMenuCloseUpLeft {
    to {
        opacity: 0;
        transform: translateX(-20px) translateY(20px) scale(0.8);
    }
}

@keyframes emojiMenuEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}