@import "../utils/chat_variables.less";
.chatBubble {
    max-width: 75%;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;

    &--user {
        align-self: flex-end;
    }

    &__content {
        word-wrap: break-word;
        background: var(--chat-bubble-content-bg-color);
        padding: 0.5rem 1rem;
        border-radius: 18px;
        max-width: 400px;

        &--user {
            background-color: var(--chat-bubble-content-user-bg-color);
            color: var(--chat-bubble-content-user-text-color);
            align-self: flex-end;
        }
    }

    &__text {
        margin: 0;
    }

    &__link {
        display: block;
        margin-top: 0.5rem;
        color: var(--chat-bubble-link-color);
        text-decoration: underline;

        &:hover {
            color: var(--chat-bubble-link-hover-color);
        }
    }
}
