@prefix: graphjs;

@{prefix}-messages.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    .regular-font;
    .@{prefix}-content {
        height: 36em;
        max-height: 36em;
        .no-padding !important;
        vertical-align: middle;
        & > * {
            float: left;
        }
        .@{prefix}-sidebar {
            overflow-y: auto;
            width: 15em;
            height: 100%;
            & > p {
                padding: 1em;
                small {
                    display: block;
                    margin-top: 1em;
                    font-size: .8em;
                    .bold-font;
                }
            }
            input, input[type] {
                display: block;
                width: 100%;
                height: 3.5em;
                padding-top: 0;
                padding-right: 1.5em;
                padding-bottom: 0;
                padding-left: 1.5em;
                color: white;
                line-height: 3.5em;
                border: none;
                border-radius: 0;
                // ThemeOption: background-color: @primary-color;
                .transition(height .35s ease);
                .placeholder-color(fade(white, 75%));
                &.@{prefix}-hidden {
                    height: 0;
                    .placeholder-color(transparent);
                }
                &::placeholder {
                    opacity: .5;
                    .transition(all .35s ease);
                }
            }
            .@{prefix}-suggestions {
                max-height: 17.5em;
                overflow-y: auto;
                background-color: fade(black, 7.5%);
                a {
                    display: block;
                    width: 100%;
                    height: 3.5em;
                    padding: .5em;
                    border-top-width: 1px;
                    border-top-style: solid;
                    border-top-color: fade(black, 5%);
                    .clearfix;
                    & > * {
                        float: left;
                        pointer-events: none;
                    }
                    img {
                        width: 2.5em;
                        height: 2.5em;
                        .border-radius(@border-radius-full);
                    }
                    b {
                        // ThemeOption: color: @text-color-normal;
                        height: 2.5em;
                        margin-left: .5em;
                        line-height: 2.5em;
                        .single-line-text;
                    }
                }
            }
            .@{prefix}-list {
                .@{prefix}-item {
                    display: block;
                    width: 100%;
                    height: 4.5em;
                    padding-top: .75em;
                    padding-left: .75em;
                    background-color: fade(black, 2.5%);
                    .box-shadow(inset -2px 0px 2px 0px fade(black, 5%));
                    .clearfix;
                    &:hover {
                        background-color: fade(black, 5%);
                    }
                    &:last-child {
                        border-bottom: none;
                    }
                    &.@{prefix}-unread {
                        // ThemeOption: background-color: fade(@primary-color, 15%);
                        &:hover {
                            // ThemeOption: background-color: fade(@primary-color, 20%);
                        }
                        div {
                            // ThemeOption: color: @text-color-weak;
                            b {
                                // ThemeOption: color: @primary-color;
                            }
                        }
                    }
                    &.@{prefix}-active {
                        border-right: none;
                        background-color: transparent;
                        .box-shadow(0px 0px 5px 0px fade(black, 7.5%));
                        &:hover {
                            background-color: transparent;
                        }
                    }
                    & > * {
                        pointer-events: none;
                    }
                    img {
                        width: 3em;
                        height: 3em;
                        .border-radius(@border-radius-full);
                    }
                    div {
                        display: inline-block;
                        overflow: hidden;
                        width: 10em / .9;
                        height: 3em / .9;
                        margin-left: calc(.5em / .9);
                        // ThemeOption: color: @text-color-normal;
                        font-size: .9em;
                        line-height: 1em / .9;
                        b {
                            display: block;
                            margin-bottom: .05em / .9;
                            // ThemeOption: color: @text-color-strong;
                            font-size: .95em / .9;
                            line-height: .95em / .9;
                            .bold-font;
                            .single-line-text;
                        }
                    }
                }
            }
        }
        .@{prefix}-main {
            overflow-y: auto;
            position: relative;
            width: calc(100% - 15em);
            height: 100%;
            .@{prefix}-conversation {
                overflow: auto;
                width: 100%;
                height: calc(100% - 6.5em);
                padding: 2em;
                .@{prefix}-item {
                    width: 90%;
                    height: auto;
                    margin-bottom: .5em;
                    &:last-of-type {
                        margin-bottom: 0;
                    }
                    &.@{prefix}-inbound {
                        margin-right: 10%;
                        div {
                            text-align: left;
                        }
                        p {
                            // ThemeOption: color: @text-color-normal;
                            background-color: fade(black, 5%);
                        }
                        time {
                            text-align: left;
                        }
                    }
                    &.@{prefix}-outbound {
                        margin-left: 10%;
                        div {
                            text-align: right;
                        }
                        p {
                            color: white;
                            // ThemeOption: background-color: @primary-color;
                            .border-radius(@border-radius-medium);
                        }
                        time {
                            text-align: right;
                        }
                    }
                    div {
                        & + div {
                            margin-top: .5em;
                        }
                    }
                    p {
                        display: inline-block;
                        width: auto;
                        padding: .75em 1em;
                        line-height: 150%;
                        word-break: break-word;
                        white-space: pre-wrap;
                        .border-radius(@border-radius-medium);
                    }
                    time {
                        display: inline-block;
                        width: 100%;
                        padding: .5em;
                        // ThemeOption: color: @text-color-weak;
                        font-size: .85em;
                        line-height: .85em;
                        &.@{prefix}-error {
                            color: @danger-color;
                        }
                    }
                }
            }
            textarea {
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                height: 6.5em;
                line-height: 1.25em;
                .border-radius(0);
                border-right: none;
                border-bottom: none;
                border-left: none;
                background-color: transparent;
            }
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        .clearfix;
        & > * {
            float: left;
        }
        .@{prefix}-left {
            width: 15em;
            .@{prefix}-user {
                display: block;
                width: 100%;
                height: calc(4.5em - 1px);
                padding-top: calc(.75em - 1px);
                padding-left: calc(.75em - 1px);
                .clearfix;
                & > * {
                    float: left;
                }
                .@{prefix}-avatar {
                    display: block;
                    width: 3em;
                    height: 3em;
                }
                .@{prefix}-information {
                    display: block;
                    width: 10em;
                    height: 3em;
                    margin-left: .75em;
                    padding: .35em 0;
                    .@{prefix}-line {
                        height: .5em;
                        margin-bottom: .4em;
                        .border-radius(calc(.5em / 2));
                        &:first-child {
                            width: 60%;
                        }
                        &:last-child {
                            width: 80%;
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
        .@{prefix}-right {
            width: calc(100% - 15em - 1px);
            height: 100%;
            padding: 2em;
            .@{prefix}-message {
                width: 60%;
                height: 4em;
                margin-bottom: 1em;
                &:nth-child(even) {
                    margin-left: 40%;
                    .@{prefix}-time {
                        margin-left: 80%;
                    }
                }
                .@{prefix}-text {
                    height: 3em;
                    .border-radius(calc(1em / 2));
                }
                .@{prefix}-time {
                    width: 20%;
                    height: .5em;
                    margin-top: .5em;
                    .border-radius(calc(.5em / 2));
                }
            }
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-messages.@{prefix}-root {
        .@{prefix}-content {
            height: 36em;
            .@{prefix}-sidebar {
                width: 4.5em;
                input, input[type] {
                    position: absolute;
                    z-index: 2;
                    top: 3.5;
                    left: 0;
                    .box-shadow(0 4px 2px -2px fade(black, 25%));
                }
                .@{prefix}-suggestions {
                    position: absolute;
                    z-index: 2;
                    top: 7em;
                    left: 0;
                    right: 0;
                    a {
                        // ThemeOption: background-color: @background-color-shade;
                    }
                }
                .@{prefix}-list {
                    .@{prefix}-item {
                        div {
                            display: none;
                        }
                    }
                }
            }
            .@{prefix}-main {
                width: calc(100% - 4.5em);
                .@{prefix}-conversation {
                    height: calc(100% - 5em);
                    padding: 1em;
                    .@{prefix}-item {
                        width: 95%;
                        &.@{prefix}-inbound {
                            margin-right: 5%;
                        }
                        &.@{prefix}-outbound {
                            margin-left: 5%;
                        }
                    }
                }
                textarea {
                    height: 5em;
                    padding: .5em .75em;
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-left {
                width: 4.5em;
                .@{prefix}-user {
                    .@{prefix}-information {
                        display: none;
                    }
                }
            }
            .@{prefix}-right {
                width: calc(100% - 4.5em - 1px);
                padding: 1em;
                .@{prefix}-message {
                    width: 95%;
                    &:nth-child(even) {
                        margin-left: 5%;
                    }
                }
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-messages.@{prefix}-root {
        .@{prefix}-content {
            height: 36em;
            .@{prefix}-sidebar {
                width: 12.5em;
                .@{prefix}-list {
                    .@{prefix}-item {
                        div {
                            width: 7.5em / .9;
                        }
                    }
                }
            }
            .@{prefix}-main {
                width: calc(100% - 12.5em);
                .@{prefix}-conversation {
                    padding: 1.5em;
                    .@{prefix}-item {
                        width: 95%;
                        &.@{prefix}-inbound {
                            margin-right: 5%;
                        }
                        &.@{prefix}-outbound {
                            margin-left: 5%;
                        }
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-left {
                width: 12.5em;
                .@{prefix}-user {
                    .@{prefix}-information {
                        width: 7em;
                    }
                }
            }
            .@{prefix}-right {
                width: calc(100% - 12.5em - 1px);
                padding: 1.5em;
                .@{prefix}-message {
                    width: 95%;
                    &:nth-child(even) {
                        margin-left: 5%;
                    }
                }
            }
        }
    }
}