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

/* vGrid */
.vgrid {
    outline: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -1px;
    .user-select(none);

    .vgrid-scrollpane {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
        z-index: 1;

        &.has-focus {
            .vgrid-cell.selected {
                background-color: @selected-background;
                * { color: @grid-selected-color; }
                i { color: @grid-selected-checkbox-color; }
                &:hover { background-color: lighten(@selected-background, 2%) }
                &:focus { background-color: @selected-focussed-background; }
            }
        }
    }

    .resizebar {
        background: transparent;
        width: 5px;
        height: 100%;
        position: relative;
        z-index: 10000;
        float: right;
        cursor: e-resize;
        cursor: ew-resize;
        cursor: col-resize;
        right: -3px;
    }

    @toolbar-height: 2.5rem;

    .vgrid-toolbar {
        position: absolute;
        display: none;
        right: 0;
        left: 0;
        background-color: #fff;
        z-index: 2;

        a {
            text-decoration: none;

            i { color: black; display: inline-block; }
        }

        &.top {
            top: 0;
            &.generic-toolbar { height: 2.5rem; }
            & .dropdown-menu {
                top: 110%;
                bottom: auto;
                right: 0;
                left: auto;
            }
        }

        &.bottom {
            bottom: 0;

            & .dropdown-menu {
                top: auto;
                bottom: 110%;
                right: 0;
                left: auto;
            }
        }

        .grid-info {
            flex: 1;
            text-align: center;
            line-height: 38px;
            margin-right: 16px;
            .ellipsis();

            .folder-count {
                font-size: 13px;
                color: #767676;
            }
        }

        .grid-options.dropdown {
            position: absolute;
            right: 0;
            top: 0;
            a {
                display: block;
                padding-right: 16px;
                padding-left: 16px;
                &:focus, &:focus i {
                    color: @selected-color;
                    background: @selected-background;
                    outline: 0;
                }
            }
        }

        .select-all {
            display: inline-block;
            i {
                color: #767676;
                font-size: 18px;
                position: relative;
                top: 2px;
                left: 3px;
                padding-right: 5px;
                &.fa-check-square-o { padding-right: 2px; }
            }
            &:focus, &:focus i {
                color: @selected-color;
                background: @selected-background;
                outline: 0;
            }
        }

        .select-all-toggle {
            float: left;
            padding: 0 8px;
        }
    }

    &.editable .select-all { display: inline-block; }

    &.top-toolbar .vgrid-toolbar.top,
    &.bottom-toolbar .vgrid-toolbar.bottom { display: flex; }

    &:not(.bottom-toolbar) .vgrid-toolbar.bottom { display: none; }

    &.top-toolbar .vgrid-scrollpane { top: @toolbar-height; }

    &.bottom-toolbar .vgrid-scrollpane { bottom: @toolbar-height; }

    &.editable {
        .vgrid-cell-checkbox { display: block; }
        .vgrid-cell {
            padding-left: 48px; /* width + padding of .vgrid-cell-checkbox */
        }
    }
}

.vgrid-cell {
    outline: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    left: 0;
    font-size: @vgrid-font-size;
    padding: 10px 18px 14px 18px;
    color: @text-color;
    background-color: @background; /* resolves hw accel anti-aliasing */
    * {
        .ellipsis();
        -webkit-font-smoothing: antialiased;
    }

    &.selectable { cursor: pointer; }

    &.vgrid-label {
        font-weight: bold;
        text-align: center;
        line-height: 1em;
        padding: 5px 16px 4px 16px;
        background-color: mix(@text-color, @background, 100%/15);
        border-bottom: 1px solid mix(@text-color, @background, 300%/15);
        cursor: pointer;
        .vertical-gradient(@background, mix(@text-color, @background, 1500%/255));

        &.left { text-align: left; }
    }

    &:hover { background: #f7f7f7; }
    &.selected {
        &:hover { background-color: lighten(@selected-unfocussed-background, 2%); }
        background-color: @selected-unfocussed-background;
    }

    &.relative { position: relative; }

    &.no-border { border-bottom: 0 none; }

    &.tail {
        border-bottom: 0 none;
        padding-top: 1em;
        padding-bottom: 1em;

        * {
            white-space: normal;
            line-height: 1.1em;
        }
    }

    //show whitespace to visually match backend sort order
    .title { white-space: pre; }

    .vgrid-cell-checkbox {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 48px;
        display: none;
        cursor: pointer;
        padding: 12px 0 0 16px;

        i.fa:before {
            color: @grid-checkbox-color;
            font-size: 18px;
            content: "\f096"; // fa-check-square-o
        }
    }

    &.selected .vgrid-cell-checkbox i.fa:before {
        color: @grid-checkbox-color;
        content: "\f14a"; // fa-check-square-o
    }

    .has-focus &.selected .vgrid-cell-checkbox i.fa:before {
        color: #fff;
    }

    .swipeDelete {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 10px 0 10px;
        line-height: 61px;
        height: 100%;
        background-color: #FF4105;
        color: #fff;
        font-size: 22px;
        width: 80px;
        text-align: center;

        &:active { background-color: darken(#DA4F49, 10%); };
    }

}

.io-ox-sidepopup .vgrid-cell:not(.calendar-grid-cell) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}