@pref: Twilio-MessageList;

.@{pref}-Container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;

    padding-left: 3.75%;
    padding-right: 3.75%;
}

.@{pref}-TypingIndicator {
    height: 28px;
    flex-shrink: 0;
    display: flex;

    span {
	    font-size: 10px;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 12px;
        margin-right: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.@{pref}-InlineMessage {
    flex: 1 0 100%;
    margin-top: 40px;
    margin-bottom: 36px; // + 4px from channel item margin
    display: flex;
}

.@{pref}-InlineMessage.@{pref}-InlineMessageNotGrouped {
    margin-bottom: 20px; // + 20px from channel item margin
}

.@{pref}-Minimal {
    .@{pref}-InlineMessage {
        margin-bottom: 16px; // + 24px from channel item margin
    }
}

.@{pref}-Squared {
    .@{pref}-InlineMessage.@{pref}-InlineMessageNotGrouped{
        margin-bottom: 28px; // + 12px from channel item margin
    }
}

.@{pref}-DateSeparator {
    flex: 1 0 100%;
    display: flex;
}

.@{pref}-SeparatorLine {
    flex: 1 1 1px;
    border-width: 1px 0 0 0;
    border-style: solid;
}

.@{pref}-SeparatorText {
    flex: 0 1 auto;
    margin-left: 12px;
    margin-right: 12px;
    font-size: 13px;
}