<script>
    export let message;
</script>

<style>
    .message {
        overflow-x: none;
        word-break: break-all;
    }

    .message-content {
        color: var(--foreground-color-2);
    }

    .pending {
        color: var(--foreground-color-3);
    }

    .author {
        font-weight: bold;
        margin-right: var(--space-xxs);
    }
</style>

<div class="message">
    <span class="author">{ message.author_username }</span>
    <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
</div>
