@import '../../chat-tokens.scss';

:host {
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 10px;

    &::after {
        display: block;
        clear: both;
        content: " ";
    }

    // TODO: replace with avatar status img
    img {
        width: $chat-message-pic-size;
        height: $chat-message-pic-size;
        margin: 0 $chat-message-pic-margin;
        display: inline-block;
        border: 2px solid transparent;
        border-radius: 100%;
        
        &.active {
            border: 2px solid $chat-status-icon-active-color;
            background: $chat-status-icon-active-color;
        }

        &.not-available {
            border: 2px solid $chat-status-icon-not-available-color;
            background: $chat-status-icon-not-available-color;
        }
    }

    span.message-date {
        color: #888888;
        font-size: $chat-message-font-size;
        line-height: $chat-message-message-date-line-height;
    }

    .sender-wrapper {
        &::after {
            display: block;
            clear: both;
            content: " ";
        }

        &.sent {
            span.message-date,
            img {
                float: right;
            }
        }
    }

    .message-bubble-wrapper {
        padding: 0 ($chat-message-pic-size + $chat-message-pic-margin * 2);
    }
    .message-bubble {
        display: inline-block;
        padding: 10px 12px;
        border: 1px solid $chat-message-border-color;
        border-radius: 3px;
        text-align: left;
        background: $chat-message-recived-background;
        width: 100%;

        font-size: $chat-message-font-size;
        line-height: $chat-message-line-height;
        color: $chat-message-font-color;

        &.sent {
            background: $chat-message-sent-background;
            float: right;
        }
    }
}