/*
*
* @copyright Copyright (c) Open-Xchange GmbH, Germany <info@open-xchange.com>
* @license AGPL-3.0
*
* This code is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.

* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public License
* along with OX App Suite. If not, see <https://www.gnu.org/licenses/agpl-3.0.txt>.
*
* Any use of the work other than as authorized under this license or copyright law is prohibited.
*
*/

// io.ox/core/tk/autocomplete
.autocomplete-search {

    height: auto;
    min-height: 100px;
    min-width: 300px;
    max-height: 600px;

    .scrollable-pane { padding: 5px 0; }

    // make sure margins/paddings are applied properly
    .scrollable-pane:after { content: ''; }

    .autocomplete-item {

        color: #333;
        padding: 2px 10px;

        // description: added by backend
        i {
            font-style: normal;
            color: rgba(0, 0, 0, 0.5);
        }
        &.indent { padding-left: 24px; }

        &.dropdown-header {
            padding-top: 9px;
            margin-top: 9px;
            border-top: 1px solid rgba(128, 128, 128, 0.25);
            // reset bootstrap
            max-width: inherit;
        }
        &.dropdown-header:first-child {
            margin-top: 0;
            border-top: 0;
        }
        &.unselectable {
            cursor: default;
            color: rgba(128, 128, 128, 0.71);
        }

        .name {
            word-break: break-all;

            i { word-break: break-word; }
        }

        &.contacts, &.contact, &.participant, &.task_participants {
            .image {
                margin-right: 14px;
                display: inline-block;
                float: left;
                .picture(42px, 42px);
            }
            .name { .ellipsis(); }
            .detail {
                color: rgba(0, 0, 0, 0.5);
                .ellipsis();
            }
        }
    }
}

// io.ox/core/tk/autocomplete: dropdown drawn inline on mobile
.autocomplete-search.mobile-dropdown {
    width: auto;
    max-width: 500px;
    margin-left: 0;
    margin-bottom: 4px;

    // adjust autocomplete defaults
    &.bottom-placement {
        border-bottom: 2px solid #fff;
    }

    // scrollable pane
    .dropdown-menu-inline {
        background-color: rgba(128, 128, 128, 0.11);
        // sytyle from bootstrap dropdown-menu
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: @border-radius-base;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
        background-clip: padding-box;
    }
    .dropdown-menu-inline:after {
        // make sure margins/paddings are applied properly
        content: '';
    }

    .autocomplete-item {
        color: #333;
        margin: 2px;

        // background-color: #eee;
        padding: 5px 0 5px 10px;

        &.indent {
            padding-left: 14px;
        }
        // description
        i {
            font-style: normal;
            color: rgba(0,0,0,.5);
        }
        // groups
        &.group {
            // background-color: white;
            font-size: 18px;
            border: none;
        }
        &.unselectable {
            padding-bottom: 0;
            color: rgba(128, 128, 128, 0.71);
        }
    }
}

@media all and (max-width: 768px), all and (max-device-width: 768px) {
    #io-ox-search-topbar.launcher      { display: none;         }
    #io-ox-search-topbar-icon.launcher { display: inline-block; }

    // block buttons on mobile
    .io-ox-search.window-content  {
        padding-top: 8px;
        .facet {
            width: 100%;
            .facet-container {
                text-align: left;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;

                .remove {
                    position: relative;
                    padding-left: 10px;
                }
            }
        }
    }


    // keep button on top while searchfield grows
    .row.query {
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
        margin-bottom: 7px;

        .recipient-actions {
            position: relative;
            top: 0;
            right: 0;
            margin-top: 1px;

            a {
                margin-right: 3px;
                padding: 2px;
                color: @label-default-bg;
                text-decoration: none;
            }

            @media (max-width: 767px) {
                padding-right: 10px;
            }
        }

        &[data-extension-id=to],&[data-extension-id=cc],&[data-extension-id=bcc] .col-xs-11 {
            width: 90%;
            margin-right: -5px;
        }
        .maillabel {
            padding-top: 3px;

            &.col-xs-1 { width: 10%; }
        }

        .token-input {
            &::-webkit-input-placeholder {
                color: #aaa;
                font-weight: normal;
            }
            &:-moz-placeholder {
                color: #aaa;
                font-weight: normal;
            }
            &::-moz-placeholder {
                color: #aaa;
                font-weight: normal;
            }
            &:-ms-input-placeholder {
                color: #aaa;
                font-weight: normal;
            }
        }

        .tokenfield.search-field.form-control {
            border: none;
            border-radius: 0;
            box-shadow: none;

            .token {
                // fill search field completely
                width: 100%;
                text-align: center;

                .token-label { padding-right: 4px; max-width: 100%; }

                a { display: none; }
            }
        }

        .tokenfield.form-control.to { padding-right: 20px; }

        .recipient-actions a { outline: 0; }

        .input-group-btn { vertical-align: top; }
    }

    .row.result .calendar-item .location { float: none; }
}

// hide/adjust default window parts
.io-ox-search-window {
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    .window-body { left: 0; }

    // scrollable
    .window-content { overflow: auto; }
}

// SEARCH APP STYLES
.io-ox-search {

    &.empty {
        .btn-search { display: block; }
        .btn-clear  { display: none;  }
    }
    &:not(.empty) {
        .btn-search { display: none; }
        .btn-clear  { display: block; }
    }

    &.window-content {

        ul, ol { margin-bottom: 0; }

        // section: applications
        .applications {
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
            margin-bottom: 6px;

            .caret { margin-left: 6px; }

            .application {
                display: inline-block;
                margin-bottom: 8px;

                .btn-group button { border-radius: 0; }
            }
        }

        .facets {
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

        // section: info
        .info {
            clear: both;
            font-style: italic;
            margin: 0 15px 14px 0;
            max-width: 470px;
            background-color: #f4f8fa;
            border-color: #5bc0de;
            padding: 6px 10px;
            border-left: 3px solid #428bca;
        }
    }
}

// GLOBAL STYLES

// applies for desktop and mobile
.search-facets {
    // 6px + 8px facet (used when facets are stacked)
    margin-bottom: 6px;

    li.facet {
        margin-right: 8px;
        margin-bottom: 8px;
        max-width: 470px;

        .facet-container {
            background-color: #E6E6E6;
            border: transparent;
            text-align: left;
            // inherited from btn-group
            -webkit-box-shadow: none;
            box-shadow: none;
            max-height: 28px;
            max-width: 470px;
            border-radius: 0;

            // action icons
            .toggle-options {
                float: right;
                    // 10px minus caret border
                    margin-left: 6px;
                    font-size: 16px;
            }
            .remove {
                margin-left: 10px;
                float: right;
            }
            .facet-label {
                font-weight: initial;
                overflow: hidden;
                display: inline;
                text-overflow: ellipsis;
                // overwrite bootstrap label defaults
                padding-top: 0;
                margin-bottom: 0;
                // ellipsis color
                color: rgba(0,0,0,.5);
                &>span {
                    color: #000000;
                    overflow: hidden;
                    .ellipsis();
                }
               .type {
                    color: rgba(0,0,0,.5);
                    &:after {
                        // divider
                        content: ':\00a0';
                    }
                }
                .name:after {
                    content: '\00a0';
                }

            }
        }
    }

    // reduce space between button and dropdown
    .dropdown-menu {
        margin-top: 0;
    }

    i.action {
        opacity: .8;
        &:hover, &:focus {
            opacity: .4;
        }
    }
}

// applies for desktop only
.search-container {

    top: 45px;
    padding: 10px;
    .overflow-x(visible);
    .overflow-y(auto);

    .search-facets {
        padding-left: 0;
        li.facet {
            // border: 1px solid red;
            width: 100%;
            margin: 0 0 7px 0;
            .facet-container {
                width: 100%;
                max-height: none;
                // 13px for a vertical alignment with search toolbar
                padding: 10px 13px;
                .facet-label {
                    font-weight: bold;
                    display: block;
                    text-align: left;
                    i, .type {
                        font-weight: normal;
                        font-style: normal;
                        color: rgba(0, 0, 0, 0.555);
                    }
                }
            }
        }

        .timefacet {
            .facet-container {
                .type {
                    padding-bottom: 4px;
                    color: rgba(0,0,0,.5);
                }
                .input-daterange {
                    .input {
                        height: 24px;
                        min-width: 90px;
                    }
                    .input-group-addon {
                        height: 24px;
                        padding: 0 8px;
                    }
                }
            }
        }
    }

    a[data-action="close"], a[data-action="toggle-adv"] {
        margin-bottom: 8px;
        margin-top: 12px;
        margin-left: 12px;
        display: block;
    }

    .facet-dropdown {
        width: 100%;
        max-width: 300px;
        right: 0;
        left: auto;
    }
}