.messages-component {
    $messages-font-size: 1rem;

    .control textarea {
        background-color: transparent;
        border: 1px solid $text;
        font-size: $messages-font-size;
    }


    .conversation-list {
        max-height: 70vh;
        overflow-y: auto;

        .partner-card {
            position: relative;
            padding: 0.8em;
            border: 1px solid transparent;
            border-radius: $radius;
            margin-bottom: 0.3em;
            cursor: pointer;
            background-color: $light;
            box-shadow: $box-shadow;
            display: flex;
            align-items: center;

            .message-avatar {
                margin-right: 0.5rem;
            }

            .date{
                font-size: 80%;
            }

            &.active {
                border-color: $primary;
            }

            &.has-unread {
                font-weight: bold;
                background-color: lighten($pink, 20%);
                border-color: $pink;

                .partner-card__title {
                    font-weight: 900;
                }
            }

            &__title {
                font-size: $messages-font-size;
                flex: 1;
            }

            .has-unread-messages {
                background-color: $red;
                width: 0.7em;
                height: 0.7em;
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: -0.3em;
                bottom: 0;
                margin: auto;
            }
        }

    }

    .chat-body {
        background-color: $light;
        box-shadow: $box-shadow;
        border-radius: $radius;
    }

    .conversation-history {
        max-height: 55vh;
        overflow-y: auto;
        font-size: $messages-font-size;
        padding: 1rem;
        display: flex;
        flex-direction: column;

        .conversation-message {
            background-color: $light;
            padding: 1rem;
            border-radius: $radius;
            box-shadow: $box-shadow;
            position: relative;
            width: 80%;
            @include mobile {
                width: 100%;
            }

            .user-message {
                flex: 1;
            }

            &:after, &:before {
                top: 100%;
                left: 5%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }

            &:after {
                border-color: rgba(136, 183, 213, 0);
                border-top-color: $light;
                border-width: 7px;
                margin-left: -7px;
            }

            &:before {
                border-color: rgba(194, 225, 245, 0);
                border-top-color: $grey-lighter;
                border-width: 10px;
                margin-left: -10px;
            }

            + .conversation-message {
                margin-top: 2rem;
            }
        }

        .my-message {
            align-self: flex-end;

            &:after, &:before {
                right: 5%;
                left: auto;
                margin-left: 0
            }

            &:after {
                margin-right: -7px;
            }

            &:before {
                margin-right: -10px;
            }

            .columns {
                flex-direction: row-reverse;
            }

            .message-title, .message-content {
                margin-right: 0.5rem;
            }

            .message-title {
                text-align: right;
                display: flex;
            }

            .message-content {
                text-align: right
            }

        }

        .message-avatar {
            margin-left: auto;
            margin-right: auto;
        }

        .message-title, .message-content {
            margin-left: 0.5rem;
            word-break: break-all;
            display: flex;
        }

        .message-title {
            a {
                color: $info;
            }
        }

        .author {
            flex: 1;
        }
        .date {
            font-size: 80%;
        }
    }

    .message-send {
        padding: 1rem;
        text-align: right;
    }


}