@import 'bootstrap-sass/assets/stylesheets/bootstrap/_variables';
@import "../../styles/_enterprise_vars";

.enterprise-message {
    width: 80%;
    position: relative;
    margin: 20px 0;

    &.message-left {
        margin-right: 20%;
        .message-body {
            background-color: color(primary-complement);
        }
        .message-body, .message-file {
            margin-left: 100px;
            .arrow {
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right:10px solid color(primary-complement);
                left: -10px;
            }
        }
        .portrait {
            float: left;
        }
    }

    &.message-right {
        margin-left: 20%;
        .message-body {
            background-color: color(secondary);
        }
        .message-body {
            margin-right: 100px;
            .arrow {
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 10px solid color(secondary);
                right: -10px;
            }
        }
        .datetag {
            right: 0;
            left: auto;
        }
        .portrait {
            float: right;
        }
    }

    .message-body {
        border-radius: 3px;
        position: relative;
        color: color(primary);
        font-weight: 100;
        word-wrap: break-word;

        .date {
            color: color(primary);
            font-size: 10px;
            text-transform: uppercase;
            position: absolute;
            top: 5px;
        }

        span.message-text {
            display: block;
            padding: 20px;
        }

        .arrow {
            width: 0;
            height: 0;
            position: absolute;
            top: 10px;
        }

        .message-file {
            color: #333;
            padding: 15px 20px 5px 20px;
            border-top: 1px solid white;
            ul {
                display: inline-block;
                li {
                    display: inline-block;
                    font-family: $font-family-sans-serif-heavy;
                }
            }
        }
    }

    .portrait {
        margin: 0 25px;
        width: 50px;
        height: 50px;
    }

    .datetag {
        display: inline-block;
        float: left;
        position: absolute;
        left: 0;
        top: 60px;
        width: 100px;
        text-align: center;
        color: color(primary);
        font-size: 12px;
    }
}