.chat-section {
    display: flex; 
    flex-direction: row-reverse;
    align-items: flex-start;
    position: relative;
    width: 100%;
    padding: 0 20px 15px 20px;
    min-height: 32px;
    box-sizing: border-box;
    left: 0;
    transform: none;


    &-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        flex-shrink: 0;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.24);
        z-index: 2; 
    }

    & .chat-section-comment {
        position: relative;
        max-width: 90%;
        padding: 8px;
        border-radius: 4px;
        background-color: white;

        span:nth-child(1) {
            position: relative;
            font-size: 15px;
            font-weight: 600;
            opacity: 0.87;
        }

        span:nth-child(2) {
            position: relative;
            display: inline-block;
            padding-top: 4px;
            padding-right: 20px;
            padding-left: 32px;
            float: right;
            min-width: 56px;
            font-size: 9px;
            opacity: 0.54;
            text-align: right;

            svg {
                position: absolute;
                top: 2px;
                left: calc(100% - 20px);
                margin-left: 4px;
                width: 16px;
                height: 16px;
                fill: black;
                opacity: 0;
            }
        }

        >svg {
            position: absolute;
            top: -2.8px;
            width: 24px;
            height: 24px;
            fill: white;
        }
    }

    &.chat-section-1 {
        justify-content: flex-start;
        flex-direction: row; 

        .chat-section-avatar {
            margin-right: 12px;
        }

        .chat-section-comment {
            border-bottom-left-radius: 0px; 
            >svg {
                left: -20px; 
            }
        }
    }

    &.chat-section-2 {

        .chat-section-avatar {
            margin-left: 12px;
        }

        .chat-section-comment {
            background-color: #DCF8C6;
            border-bottom-right-radius: 0px;

            >svg {
                transform: scaleX(-1); 
                left: auto; 
                right: -20px; 
                fill: #DCF8C6;
            }
        }
    }

    &.msg-sent .chat-section-comment span:nth-child(2) svg {
        opacity: 0.54;
        fill: black;
    }
    &.msg-delivered .chat-section-comment span:nth-child(2) svg {
        opacity: 0.8;
        fill: black;
    }
    &.msg-read .chat-section-comment span:nth-child(2) svg {
        opacity: 1;
        fill: #4FC3F7;
    }

    &.chat-section-date {
        padding-top: 16px;
        height: auto;
        min-height: 40px;
        display: flex;
        justify-content: center;
        width: 100%;
        
        .chat-section-avatar { display: none; } 
        .chat-section-comment {
            margin-left: 0;
            transform: none;
            background-color: #E1F2FB;
            display: flex;
            align-items: center;
            justify-content: center;

            span { color: black; opacity: 0.54; }
            >svg { display: none; }
        }
    }
}