<arc-chat-message-balloon>

    <div class={ balloon: true, mine: myMessage, another: !myMessage }>
        <div class="tail"></div>
        <div class="message">{message}</div>
        <div class="datetime">{date} {time}</div>
    </div>
    <div style="clear: both;"></div>

    <style scoped>
        .balloon{
            position: relative;
            margin-top: 30px;
            margin-bottom: 10px;
            margin-left: 0px;
            margin-right: 0px;
            border-radius: 5px;
            padding: 8px 8px;
            max-width: 80%;
        }

        .mine{
            color: #333;
            background-color: #83e040;
            float: right;
            margin-right: 50px;
        }

        .another{
            color: #555;
            background-color: #f9f9f9;
            margin-left: 50px;
        }

        .message{

            font-size: 1.2em;
        }

        .datetime{
            width: 100%;
            text-align:right;
            font-size: 0.9em;
            margin-top: 4px;
        }

        .tail{
            border-style: solid;
            width: 0;
            height: 0;
            position: absolute;
            top: -5px;
        }
        .mine .tail{
            right: -10px;
            border-width: 8px 0 8px 20px;
            border-color: transparent transparent transparent #83e040;
            transform: rotate(325deg);
        }
        .another .tail{
            left: -10px;
            border-width: 8px 20px 8px 0;
            border-color: transparent #f9f9f9 transparent transparent;
            transform: rotate(35deg);
        }
    </style>


    <script>
    </script>
    
</arc-chat-message-balloon>