/*
*
* @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.
*
*/

@appcontrol-height:                     64px;
@appcontrol-height-smartphone:          50px;
@appcontrol-launcher-height-smartphone: 50px;

@appcontrol-border-color:               rgba(0, 0, 0, 0.90);
@appcontrol-launcher-color:             @white;
@appcontrol-launcher-color-highlight:   @white;

@launcher-fg:       #666;
@launcher-bg:       #fff;
@launcher-fg-hover: #666;
@launcher-bg-hover: #eee;

@launcher-stroke-width: 3px;
@launcher-stroke-width-retina: 3px;

@launcher-text-size: 12px;
@launcher-badge-color: #757575; //#c30000;

@launcher-size: 96px;
@launcher-vertical-amount: 3;
@launcher-spacing: 2px;
@launcher-outer-spacing: 8px;

@quicklaunch-width: @appcontrol-height;
@quicklaunch-width-smartphone: @appcontrol-height-smartphone;

@quicklaunch-stroke-width: 3px;
@quicklaunch-stroke-width-retina: 3px;
@quicklaunch-button-color: rgba(255, 255, 255, 0.80);

@svg-wrap-size: 56px; // absolute value to avoid subpixel rendering

// adjust positions of top-bar and screens
#io-ox-core {
    #io-ox-topbar { display: none; }
    #io-ox-screens {
        top: @appcontrol-height;
        .smartphone & {
            top: @appcontrol-height-smartphone;
        }
    }
}

.smartphone {

    .popover-signout {
        margin-right: 10px;
        .popover-content-signout { color: #333; }
    }

    #io-ox-appcontrol {

        #io-ox-launcher {

            & > button {
                // obsolete? button has always class launcher-btn
                height: 44px; //@appcontrol-height-smartphone;
                width: 100%; // @appcontrol-height-smartphone;
                padding: 0;
                &.launcher-btn {
                    padding: 14px;
                    width: @appcontrol-launcher-height-smartphone;
                    height: @appcontrol-launcher-height-smartphone;
                }
            }
        }
    }
}

#io-ox-top-logo {
    list-style: none;
    width: auto;
    margin: 0 24px;
    // Keep this for dynamic themes
    font-size: 0;
    // this is needed for firefox when logo has auto width, see OXUIB-1213
    height: 100%;

    .smartphone & {
        line-height: @appcontrol-height-smartphone;
        margin: 0 10px;

        img {
            margin-top: -2px;
            position: initial;
            top: auto;
        }
    }

    img {
        width: 60px;
        max-height: 100%;
        position: relative;
    }
}

.logo-btn {
    padding: 0;
    border: 0;
    &:focus, &:hover {
        outline: 0;
        background: rgba(0, 0, 0, .3);
    }
}

// small adjustment because fa-th icon is not properly centered in font awesome
// ugly selector to avoid using of important
html:not(.smartphone) #io-ox-appcontrol #io-ox-toprightbar #io-ox-launcher .launcher-btn { padding: 18px 11px 16px 11px; }

#io-ox-appcontrol {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 12;
    color: #fff;
    height: @appcontrol-height;
    border-bottom: 1px solid @appcontrol-border-color;
    padding: 0;
    display: flex;
    align-content: center;

    .smartphone & {
        height: @appcontrol-height-smartphone;
    }

    &:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
        height: @appcontrol-height;
        border-bottom: 1px solid @appcontrol-border-color;
        opacity: 0;
        .smartphone & {
            height:  @appcontrol-height-smartphone;
            border-bottom: 0;
        }
    }

    html.time-dependent &:before {
        transition: opacity 5s linear;
    }

    & > div {
        display: block;
    }

    #io-ox-top-logo {
        display: flex;
        align-items: center;
    }

    .badge {
        background-color: @notification-icon-background;
    }

    #io-ox-launcher, #io-ox-quicklaunch {
        flex-direction: row;
        display: flex;
        align-items: center;
        flex-shrink:0;
        align-self: auto;
        min-width: 0;
        min-height: auto;
        & > button {
            .fasvg { height:18px }
            // styles for fa-icon
            font-size: 18px;
            color: @appcontrol-launcher-color;
            padding: 2px 16px 2px 16px;
            width: 48px;
            // svg styles
            //padding: 24px 16px;
            //width: @appcontrol-height - 16;
            position: relative;
            z-index: 2;
            height: @appcontrol-height;
            display: inline-block;
            border: 0;
            svg .fill-c1 { fill: #fff; }

            .smartphone & {
                &.launcher-btn {
                    padding: 12px;
                    width: @appcontrol-launcher-height-smartphone;
                    height: @appcontrol-launcher-height-smartphone - 1;
                }
            }
        }
        button {
            outline:0;
            &:hover, &:focus {
                // needed or svg icons are underlined on safari
                text-decoration: none;
                color: @appcontrol-launcher-color-highlight;
            }
        }
    }
    #io-ox-quicklaunch > button {
        color: @quicklaunch-button-color;
        margin-top: initial;
        & > .lcell > .icon {
            fill: #fff;
            line-height: 0;
        }
    }

    &.open #io-ox-launcher > button,
    #io-ox-launcher > button:hover,
    #io-ox-launcher > button:focus,
    #io-ox-quicklaunch > button:hover,
    #io-ox-quicklaunch > button:focus {
        background: rgba(0, 0, 0, .3);
        outline: 0;
        //svg .fill-c1 { fill: @brand-primary; }
        //svg .stroke-c1 { fill: @brand-primary; }
    }

    #io-ox-quicklaunch {

        .smartphone & {
            display: none;
        }

        flex-shrink: 0;
        min-width: @quicklaunch-width;
        min-height: auto;

        svg.indicator {
            position: absolute;
            z-index: 1;
            top: 18px;
            left: 33px;
            circle { fill: #eb4400 }
        }

        .title {
            // yes visibility hidden not display none. Otherwise the upsell icon is not displayed
            visibility: hidden;
            height: 0;
        }

        .upsell svg {
            color: @upsell-icon-color;
            visibility: visible;
            position: absolute;
            z-index: 1;
            top: 32px;
            left: 30px;
            font-size: 14px;
            width: 14px;
        }
    }

    #io-ox-topsearch {
        margin-top: 15px;
        flex-grow: 1;

        .search-box > .form-group { margin-bottom: 0; }

        .search-field {
            border-radius: 0;
            height: 32px;
        }

        .tokenfield { padding-top: 2px; }

        .twitter-typeahead .tt-input {
            background-color: transparent;
        }

        // input placeholder text
        .tokenfield-placeholder {
            // avoid visual changes when tokenfield get's initated
            padding-left: @default-padding;
        }

        .io-ox-find {
            flex: 1;
            max-width: 350px;
            margin-left: auto;
        }
    }

    .io-ox-find:not(.active) {
        .search-field {
            background-color: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.30);
        }

        // NOTE: Placeholders: IE 11 first and needs !important
        .token-input:-ms-input-placeholder { color: #fff !important; }
        .tokenfield-placeholder:-ms-input-placeholder { color: #fff !important; }

        .token-input::placeholder { color: #fff; }
        .tokenfield-placeholder::placeholder { color: #fff; }
        .token-input, .tokenfield-placeholder {
            &::-webkit-input-placeholder, &::-ms-input-placeholder {
                color: #fff;
            }
        }
    }

    & > .logo-btn,
    #io-ox-topleftbar,
    #io-ox-topleftbar > ul,
    #io-ox-topleftbar > ul > li,
    #io-ox-topleftbar > ul > li > a,
    #io-ox-toprightbar,
    #io-ox-toprightbar > ul,
    #io-ox-toprightbar > ul > li,
    #io-ox-toprightbar > ul > li > a,
    #io-ox-toprightbar > ul > li > button
    {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        margin: 0;
    }

    #io-ox-topleftbar,
    #io-ox-toprightbar {
        padding-right: 12px; // break alignment on purpose
        // more space needed on smartphones
        .smartphone & { padding-right: 0}
        .launcher {
            & > a, & > button {
                padding: 16px 10px;
                cursor: pointer;
                font-size: 18px;
                text-decoration: none;
                color: @appcontrol-launcher-color;

                &:hover, &:focus {
                    background: rgba(0, 0, 0, .3);
                    outline: 0;
                    color: @appcontrol-launcher-color-highlight;
                }
            }
            .fasvg {
                height: 18px;
                text {
                    fill: #fff;
                }
            }
        }

        #io-ox-topbar-help-dropdown-icon {
            & > a { padding: 16px 5px; }
            .launcher-icon { height: 22px; }
        }

        #io-ox-topbar-account-dropdown-icon > a { padding: 16px 11px; }
        .contact-picture {
            .picture(40px, 40px);
            .flex-center;
            background-color: #eee;
            color: rgba(0, 0, 0, 0.60);
            font-size: 18px;
            font-weight: bold;
            fill: currentColor;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.50);
        }
    }
}

#topbar-account-dropdown .user {
    @sidelength: 64px;

    padding: 3px 20px;
    display: flex;
    width: 100%;

    .action { //, .action:hover, .action:focus {
        display: flex;
        padding: 0;
        background: none;
    }

    .user-picture-container {
        margin-right: 16px;
        width: @sidelength;
    }

    .user-picture {
        .flex-center;
        .picture(@sidelength, @sidelength);
        background-color: #eee;
        color: rgba(0, 0, 0, 0.60);
        font-size: 11px;
        font-weight: bold;
        fill: currentColor;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, 0.50);

        .fa { display: none; }

        .initials {
            font-size: 20px;
        }
    }

    // overwrites dropdown defaults
    // .action:hover, .action:focus { background: none; }

    // unset user image
    .action:hover, .action:focus {
        .fa { display: block; }
        .initials { display: none; }
    }

    // box shadow outline
    .action:focus .user-picture {
        box-shadow: 0 0 8px 2px @link-color;
        &[style] {
            box-shadow: 0 0 8px 2px @link-color, 0 0 0 2px white inset;
        }
    }

    .text-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // overflow handling
        min-width: 0;
        // dropdown would just grow to infinity instead of doing ellipsis without it
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        .name {
            font-size: 16px;
            font-weight: 700;
        }
        .name, .mail {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            // fixes new line and ellipsis at breaking points. For example '-' in mail addresses
            white-space: nowrap;
        }
    }
    .smartphone & {
        .user-picture-container {
            width: 48px;
        }
        .user-picture {
            width: 48px;
            height: 48px;
        }
        .action {
            flex-direction: column;
            justify-content: center;
        }
        .text-container {
            text-align: left;
            max-width: none;
        }
        width: auto;
    }
}
// Fix for IE dropdown width calculation see OXUIB-184
.ie11 .launcher-dropdown.dropdown-menu {
    width: @launcher-vertical-amount * (@launcher-size  + @launcher-spacing * 2) + @launcher-outer-spacing *2 + 2.125 !important;
}

.launcher-dropdown.dropdown-menu {

    padding: @launcher-outer-spacing;
    width: @launcher-vertical-amount * (@launcher-size  + @launcher-spacing * 2) + @launcher-outer-spacing *2 + 2.125;

    .smartphone & {
        width: 100% !important;
        left: 0px !important;
        right: 0px !important;
        height: auto !important;
        top: @appcontrol-height-smartphone !important;
        max-height: 90%;
        -webkit-overflow-scrolling: touch;
    }

    li {
        float: left;

        //.smartphone & { float: initial; }

        .fa { width: auto; }
        a:focus {
            i, .title { color: #fff; }
            outline: 0;
        }
    }

    a.lcell {
        height: @launcher-size;
    }

    .lcell {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        white-space: normal;

        margin: @launcher-spacing;
        height: 84px;
        // grows width with textzoom. Makes sure that instead of overlapping text, items just move to the next line
        width:  ~"calc(3rem + 48px)";

        svg.indicator { display: none; }

        .closer {
            font-size: 15px;
            color: #666;
            height: 42px;
        }

        .smartphone & {
            width: ~"calc(100vw/3 - 8px)";
            padding: 0;
            margin: 0;
        }

        cursor: pointer;

        .title {
            color: @launcher-fg;
            font-size: @launcher-text-size;
            text-align: center;
            width: @launcher-size;
            .smartphone & {
                font-size: 14px;
                top: 70%;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                // to make ellipsis actually work (test with open mail compose and long subject)
                display: block;
                white-space: nowrap;
            }
            .flex-center(row);
            &.upsell svg {
                color: @upsell-icon-color;
                margin-left: 4px;
                font-size: 14px;
                width: 14px;
                top: 0;
            }
        }
        .badge {
            position: absolute;
            top: 43%;
            right: 17%;
            font-size: 9px;
            z-index: 1;
            background-color: @launcher-badge-color;
        }
        .icon {
            width: @svg-wrap-size;
            flex: 1;
            // no icons on smartphone as it is a dropdown there

        }

        svg, i {
            position: relative;
            //top: -10px;
            //height: 100%;
            //width: 100%;
            top: 10px;
            font-size: 36px;
            // overwrite default svg width/height
            width:36px;
            height: auto;

            color: @app-color-standard;
            overflow: visible;
            /*.smartphone & {
                // top: -10px;

                // for FA icons
                top: auto;
                line-height: 42px;
                font-size: 24px;
            }*/
            // overwrite stroke colors if coloredicons are configured
            &.colored {
                &.app-icon-mail {
                    color: @app-color-mail;
                    .stroke-c1 { stroke: @app-color-mail; }
                    .fill-c1 { fill: @app-color-mail; }
                }
                &.app-icon-chat {
                    color: @app-color-chat;
                    .stroke-c1 { stroke: @app-color-chat; }
                    .fill-c1 { fill: @app-color-chat; }
                }
                &.app-icon-calendar {
                    color: @app-color-calendar;
                    .stroke-c1 { stroke: @app-color-calendar; }
                    .fill-c1 { fill: @app-color-calendar; }
                }
                &.app-icon-addressbook {
                    color: @app-color-addressbook;
                    .stroke-c1 { stroke: @app-color-addressbook; }
                    .fill-c1 { fill: @app-color-addressbook; }
                }
                &.app-icon-drive {
                    color: @app-color-drive;
                    .stroke-c1 { stroke: @app-color-drive; }
                    .fill-c1 { fill: @app-color-drive; }
                }
                &.app-icon-tasks {
                    color: @app-color-tasks;
                    .stroke-c1 { stroke: @app-color-tasks; }
                    .fill-c1 { fill: @app-color-tasks; }
                }
                &.app-icon-portal {
                    color: @app-color-portal;
                    .stroke-c1 { stroke: @app-color-portal; }
                    .fill-c1 { fill: @app-color-portal; }
                }
                &.app-icon-text {
                    color: @app-color-text;
                    .stroke-c1 { stroke: @app-color-text; }
                    .fill-c1 { fill: @app-color-text; }
                }
                &.app-icon-spreadsheet {
                    color: @app-color-spreadsheet;
                    .stroke-c1 { stroke: @app-color-spreadsheet; }
                    .fill-c1 { fill: @app-color-spreadsheet; }
                }
                &.app-icon-presentation {
                    color: @app-color-presentation;
                    .stroke-c1 { stroke: @app-color-presentation; }
                    .fill-c1 { fill: @app-color-presentation; }
                }
            }

            .stroke-c1 { stroke: @launcher-fg; }
            .fill-none { fill: none;   }
            .fill-c1   { fill: @launcher-fg; }
            .stroke-w1 {
                stroke-width: @launcher-stroke-width;
                .retina & {
                    stroke-width: @launcher-stroke-width-retina;
                }
            }

        }

    }
    button.lcell {
        background: @launcher-bg;
        &:focus, &:hover {
            .stroke-c1 { stroke: @launcher-fg-hover }
            .fill-c1 { fill: @launcher-fg-hover }
            background: @launcher-bg-hover;
        }
    }
}

#io-ox-launchgrid-overlay {
    z-index:11;
    display:none;
    background-color: rgba(255, 255, 255, 0.01);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: @appcontrol-height;
    &.open { display:block; }
    .smartphone & {
         top: @appcontrol-height-smartphone;
    }
}

#io-ox-launchgrid-overlay-inner {
    position: absolute;
    display:none;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
}

@media (max-width: 320px)  {
    // reduce spacings to fit topbar on really small devices
    .smartphone #io-ox-appcontrol {
        #io-ox-topsearch { margin-right: 0; }
        #io-ox-topleftbar .launcher > a { padding: 16px 9px; }
        #io-ox-toprightbar .launcher > a { padding: 16px 9px; }
        #io-ox-launcher > button.launcher-btn { width: 44px; }
    }
}