@component: Twilio-ChatItem;

.@{themeName} {

    .@{component}-Avatar {
        background-color: @avatar-background-color;
        svg {
            fill: @avatar-color;
        }
    }

    .@{component}-ReadStatus {
        span {
            color: @read-status-color;
        }
        svg {
            fill: @read-status-color;
        }
    }

    .@{component}-fromOthers {

        .@{component}-AvatarLine {
            background-color: @bubble-container-others-background-color;
        }

        .@{component}-Bubble {
            background-color: @bubble-container-others-background-color;
        }

        .@{component}-Spike {
            fill: @bubble-container-others-background-color;
        }

        .@{component}-Header {
            p {
                color: @bubble-container-others-header-color;
            }
        }

        .@{component}-Body {
            p {
                color: @bubble-container-others-body-color;
            }
        }
    }

    .@{component}-fromMe {

        .@{component}-AvatarLine {
            background-color: @bubble-container-me-background-color;
        }

        .@{component}-Bubble {
            background-color: @bubble-container-me-background-color;
        }

        .@{component}-Spike {
            fill: @bubble-container-me-background-color;
        }

        .@{component}-Header {
            p {
                color: @bubble-container-me-body-color;
            }
        }

        .@{component}-Body {
            p {
                color: @bubble-container-me-body-color;
            }
        }
    }
}