@import (reference) "../../customize/src/less2/include/browser.less";
@import (reference) "../../customize/src/less2/include/markdown.less";
@import (reference) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/framework.less';

.framework_min_main(
    @bg-color: @colortheme_friends-bg,
    @warn-color: @colortheme_friends-warn,
    @color: @colortheme_friends-color
);

// body
&.cp-app-contacts {
    @keyframes example {
        0% {
            background: rgba(0,0,0,0.1);
        }
        50% {
            background: rgba(0,0,0,0.3);
        }
        100% {
            background: rgba(0,0,0,0.1);
        }
    }

    display: flex;
    flex-flow: column;

    background-color: red !important;
    @button-border: 2px;
    @bg-color: @colortheme_friends-bg;
    @color: @colortheme_friends-color;

    #cp-app-contacts-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0;
        &.ready {
            background-size: cover;
            background-position: center;
        }
    }

    #cp-toolbar {
        display: flex; // We need this to remove a 3px border at the bottom of the toolbar
    }

    #cp-app-contacts-friendlist {
        width: 350px;
        height: 100%;
        background-color: lighten(@bg-color, 10%);
        overflow-y: auto;
        .cp-app-contacts-friend {
            background: rgba(0,0,0,0.1);
            padding: 5px;
            margin: 10px;
            cursor: pointer;
            position: relative;
            .cp-app-contacts-right-col {
                margin-left: 5px;
                display: flex;
                flex-flow: column;
            }
            &:hover {
                background-color: rgba(0,0,0,0.3);
            }
            &.cp-app-contacts-notify {
                animation: example 2s ease-in-out infinite;
            }
        }
        .cp-app-contacts-remove {
            cursor: pointer;
            width: 20px;
            &:hover {
                color: darken(@color, 20%);
            }
        }
    }

    #cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar {
        .avatar_main(30px);
        &.cp-avatar {
            display: flex;
        }
        cursor: pointer;
        color: @color;
        media-tag {
            img {
                color: #000;
            }
        }
        media-tag, .cp-avatar-default {
            margin-right: 5px;
        }
        .cp-app-contacts-status {
            width: 5px;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            background-color: #777;
            &.cp-app-contacts-online {
                background-color: green;
            }
            &.cp-app-contacts-offline {
                background-color: red;
            }
        }
    }

    .placeholder (@color: #bbb) {
        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: @color;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: @color;
            opacity:  1;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: @color;
            opacity:  1;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: @color;
        }
        &::-ms-input-placeholder { /* Microsoft Edge */
            color: @color;
        }
    }

    #cp-app-contacts-messaging {
        flex: 1;
        height: 100%;
        background-color: lighten(@bg-color, 20%);
        min-width: 0;

        .cp-app-contacts-info {
            padding: 20px;
        }
        .cp-app-contacts-header {
            background-color: lighten(@bg-color, 15%);
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;

            .hover () {
                height: 100%;
                line-height: 30px;
                padding: 10px;
                &:hover {
                    background-color: rgba(50,50,50,0.3);
                }
            }

            .cp-avatar,
            .cp-app-contacts-right-col {
                 flex:1 1 auto;
            }
            .cp-app-contacts-remove-history {
                .hover;
            }
            .cp-avatar {
                margin: 10px;
            }
            .cp-app-contacts-more-history {
                //display: none;
                .hover;
                &.cp-app-contacts-faded {
                    color: darken(@bg-color, 5%);
                }
            }
        }
        .cp-app-contacts-chat {
            height: 100%;
            display: flex;
            flex-flow: column;
            .cp-app-contacts-messages {
                padding: 0 20px;
                margin: 10px 0;
                flex: 1;
                overflow-x: auto;
                .cp-app-contacts-message {
                    & > div {
                        padding: 0 10px;
                    }
                    .cp-app-contacts-content {
                        overflow: hidden;
                        word-wrap: break-word;
                        &> * {
                            margin: 0;
                        }
                    }
                    .cp-app-contacts-date {
                        display: none;
                        font-style: italic;
                    }
                    .cp-app-contacts-sender {
                        margin-top: 10px;
                        font-weight: bold;
                        background-color: rgba(0,0,0,0.1);
                    }
                }
            }
        }
        .cp-app-contacts-input {
            background-color: lighten(@bg-color, 15%);
            height: auto;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 75px;
            textarea {
                margin: 5px 0;
                padding: 0 10px;
                border: none;
                height: 50px;
                flex: 1;
                background-color: darken(@bg-color, 10%);
                color: @color;
                resize: none;
                line-height: 50px;
                overflow-y: auto;
                .placeholder(#bbb);
                &[disabled=true] {
                    .placeholder(#999);
                }
                &:placeholder-shown { line-height: 50px; }
            }
            button {
                height: 50px;
                border-radius: 0;
                border: none;
                background-color: darken(@bg-color, 15%);
                &:hover {
                    background-color: darken(@bg-color, 20%);
                }
            }
        }
    }
}