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

.folder-tree {

    padding: 8px 0;
    overflow: auto;
    background-color: @foldertree-sidepanel-background;
    .user-select(none);

    // font weights
    @fontSize: 13px;
    @normal: 400;
    @bold: 700;
    @indentation: 40px;
    // 24px but scales with text zoom
    @height:  1.714em;

    // width fix
    .tree-container {
        min-width: 100%;
        display: block;
        padding: 0;
        margin: 0;
        outline: 0;
    }

    a[role="treeitem"] {
        text-decoration: underline;
    }

    .folder {
        line-height: calc(@height ~" - 1px");
        overflow: visible;
        white-space: nowrap;
        width: 100%;
        display: block;
        cursor: pointer;
        outline: 0;

        &.selected > .folder-node .folder-options {
            display: inline-block;
        }

        &.empty {
            display: none;
            &.show-anyway {
                display: block;
                .folder-arrow {
                    .fa {
                        &:before {
                            display: none;
                        }
                    }
                }
            }
        }

        &.disabled > .folder-node > .folder-label,
        &.no-select > .folder-node > .folder-label {
            color: #707070;
            font-style: italic;
        }
        &.selected.no-select:not(:focus) > .folder-node > .folder-label {
            color: #616161;
        }
    }

    &.visible-selection {

        .selected > .folder-node {
            background-color: @foldertree-selected-background;
            * {
                color: @foldertree-selected-label-color;
            }
        }

        .selectable > .folder-node:hover, .selectable.dnd-over > .folder-node {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .selectable:focus > .folder-node {

            background-color: @foldertree-selected-focus-background;
            * {
                color: @foldertree-focused-label-color;
            }
            .folder-counter {
                color: @foldertree-selected-focus-counter-color;
            }
            .folder-options {
                background-color: @foldertree-selected-focus-options-background;
            }
        }
    }

    &.visible-selection-smartphone {
        // visually ignore hover/focus/blur
        .selected > .folder-node {
            // using &.visible-selection .selectable:focus > .folder-node
            background-color: @foldertree-selected-focus-background;
            * {
                color: @foldertree-focused-label-color;
            }
            .folder-counter {
                color: @foldertree-selected-focus-counter-color;
            }
            .folder-options {
                background-color: @foldertree-selected-focus-options-background;
            }
        }
    }

    .folder-node {

        height: @height;

        a.account-link {
            padding: 0 8px;
            color: @foldertree-account-link-color;
            vertical-align: top;
        }

        .folder-arrow {
            color: #777;
            display: inline-block;
            padding-left: @default-padding;
            width: @indentation;
        }

        .folder-label, .folder-counter, .folder-options, .folder-buttons, .account-link {
            font-weight: @normal;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            margin: 0 @default-padding 0 0;
            vertical-align: top;
            &:empty { margin: 0; }
        }
        .folder-options { margin-right: 0; }

        .folder-label {
            font-size: @fontSize;
            &:first-child { // needed when arrows are hidden
                margin-left: @default-padding;
            }
        }

        .folder-counter {
            color: @foldertree-counter-color;
            font-weight: @bold;
            display: none;
            vertical-align: top;
        }

        &.show-counter .folder-counter {
            display: inline-block;
        }

        .folder-options {

            padding: 0 12px;
            background-color: rgba(0, 0, 0, 0.05);
            outline: 0;
            display: none;

            i { line-height: inherit; }

            &:focus {
                i { color: white; }
                background-color: @foldertree-selected-focus-background;
            }
        }

        .folder-icon {

            display: none;

            &.visible {
                display: inline-block;
                margin: 0 12px 0 0; // yep, 12
            }

            i {
                &:not(.file-type-icon) {
                    text-align: left;
                    &:before { content: '\f114'; } // fa-folder-o
                }
            }

            &.inbox { i:before { content: '\f01c'; }} // fa-inbox
            &.unseen { i:before { content: '\f0e0'; }} // fa-envelope
            &.sent { i:before { content: '\f1d8'; }} // fa-paper-plane
            &.drafts { i:before { content: '\f15b'; }} // fa-file
            &.trash { i:before { content: '\f1f8'; }} // fa-trash
            &.spam { i:before { content: '\f05e'; }} // fa-ban
            &.archive { i:before { content: '\f187'; }} // fa-archive
            &.default { i { color: #aaa; }}

            &.myshares { i:before{ content: '\f0c2'; }} // fa-cloud
            &.attachments { i:before{ content: '\f0c6'; }} // fa-paperclip
            &.myfiles { i:before{ content: '\f007'; }} // fa-user
            &.myfavorites { i:before{ content: '\f005'; }} // fa-star
        }

        .folder-checkbox {
            display: inline-block;
            margin: 0 @default-padding 0 0;
        }

        .folder-shared {
            padding: 2px;
            color: rgba(0, 0, 0, 0.30);
            &:before { content: '\f007'; } // fa-user
        }

        .folder-sub {
            padding: 2px;
            color: rgba(0, 0, 0, 0.30);
            &:before { content: '\f0c2'; } // fa-cloud
        }
    }

    .folder.open > .folder-node > .folder-icon.default {
        i:before { content: '\f115'; } // fa-folder-open-o
    }

    .subfolders {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: none;
    }

    .folder.open > .subfolders {
        display: block;
    }

    .favorites, .unified-folders, .standard-folders, .myshares, .root-folders, .private-drive-folders, .public-drive-folders, .filestorage-folders, .remote-folders {
        margin-bottom: @default-padding;
        @media (max-width: @smartphone-breakpoint), (max-device-width: @smartphone-breakpoint) {
            margin-bottom: 0;
        }
    }

    // sections in flat folder views
    .folder.section {

        &.open {
            margin-bottom: 16px;
        }

        &:first-child {
            margin-top: 0;
        }

        & > .folder-node > .folder-label {
            font-weight: @bold;
        }
    }

    // shorten folder title when selected so that folder options are visible
    .selected > .folder-node > .folder-label {
        font-weight: @bold;
        vertical-align: top;

        > div {
            .ellipsis();
        }
    }

    .flat-tree {
        // set min-width on flat folder to get consistent layout
        // must match side-panel's default width of 250px
        .folder-label {
            min-width: 150px;
        }
        // set proper limit when selected (see above)
        .selected > .folder-node > .folder-label {
            width: 150px;
        }
    }

    // links
    .links {

        list-style-type: none;
        margin: 16px 0 0 0;
        padding: 0 @default-padding @default-padding @indentation;
        font-size: @fontSize;
        line-height: 24px;
        font-weight: @normal;

        &:empty {
            margin: 0;
            padding: 0;
        }

        ul {
            margin-top: -1px;
            padding-bottom: 1px;
        }
    }

    .folder.section + .links {
        margin: 16px 0 16px @indentation;
        padding: 0;
        line-height: 1.5rem;
        &:empty {
            margin: 0;
        }
    }

    .mobile-edit-mode & {
        .selectable[data-contextmenu] {
            .folder-label {
                color: @link-color;
                text-decoration: underline;
            }
        }
    }
}

// subscribe dialog
.io-ox-dialog-popup {
    .has-error .btn-new-account {
        color: @error-text-color;
        border-color: @error-text-color;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }
}

.smartphone {
    .folder-tree {

        padding-left: 20px;

        // custom mobile values
        @mobile-height: 48px;
        @mobile-line-height: @mobile-height;
        @mobile-arrow-size: 20px;
        @mobile-label-size: 15px;

        .folder {
            line-height: @mobile-line-height;
        }
        .folder-icon {
            float: left;
        }
        .folder-node {
            height: @mobile-height;

            .folder-arrow {
                font-size: @mobile-arrow-size;
                position: absolute;
                right: 0;
                text-align: center;
                padding-left: 0;
                // .fa-caret-right:before {
                //     content: "\f0d8";
                // }
                .fa-caret-down:before {
                    content: "\f0d7";
                }
            }

            .folder-label, .folder-counter, .folder-options {
                font-size: @mobile-label-size;
            }
            .folder-label > div {
                max-width: 320px;
                .ellipsis();
            }
            .folder-buttons {
                // see bug 58993
                vertical-align: top;
            }
        }
        li[data-id="virtual/settings"] {
            .folder-node {
                .folder-label > div {
                    max-width: 280px;
                }
            }
        }

        .folder.section + .links {
            margin-left: 0px;
        }

        .links {
            font-size: @font-size-touch;
            padding-left: 0;
            a {
                margin-bottom: 8px;
            }
        }
        .flat-tree {
            // set min-width on flat folder to get consistent layout
            // must match side-panel's default width of 250px
            .folder-label {
                min-width: 160px;
            }
            // set proper limit when selected (see above)
            .selected > .folder-node > .folder-label {
                width: 160px;
            }
        }
    }
}