/*!
 * Copyright 2019 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// common mobile css

.k-pane-wrapper {
    position: relative;
    font-size: 14px;

    .k-pane {
        width: 100%;
        height: 100%;
        user-select: none;
        box-sizing: border-box;
        font-family: sans-serif;
        overflow-x: hidden;
    }

    .k-view {
        top: 0;
        left: 0;
        position: absolute;
        border: 0;
        .flexbox();
        height: 100%;
        width: 100%;
        .flex-direction(column);
        .flex-align-items(stretch);
        .flex-align-content(stretch);
        vertical-align: top;
    }

    .k-content {
        min-height: 1px;
        .flex(1);
        .flex-align-items(stretch);
        display: block;
        width: auto;
        overflow: hidden;
        position: relative;
    }
}

// /common mobile css

.k-pane-wrapper {

    .k-grid-edit-form,
    .k-grid-column-menu,
    .k-grid-filter-menu,
    .k-scheduler-edit-form {

        > .k-header {
            display: flex;
            justify-content: space-between;
            padding: .3em .6em;
            width: auto;
            line-height: 2em;

            .k-header-done,
            .k-header-cancel {

                .k-icon {
                    font-size: 1.5em;
                }
            }
        }
    }

    .k-grid-edit-row .k-textbox {
        box-sizing: border-box;
    }

    .k-ie & {
        .k-scheduler {
            .k-scheduler-toolbar,
            .k-scheduler-footer {
                line-height: 2em;
            }
        }
    }
}

// Adaptive Grid

.k-pane-wrapper {

    > div.k-pane {
        .box-shadow(none);
        font-weight: normal;
    }

    .k-popup-edit-form,
    .k-grid-edit-form,
    .k-grid-column-menu,
    .k-grid-filter-menu {

        .k-content {
            overflow-y: auto;

            > .k-scroll-container {
                position: absolute;
                width: 100%;
                min-height: 100%;
                .box-sizing(border-box);
            }
        }
    }

    .k-grid-filter-menu {

        .k-filter-selected-items {
            margin: 1em;
            font-weight: normal;
        }
    }

    .k-grid-edit-form {

        .k-popup-edit-form,
        .k-edit-form-container {
            width: auto;
        }
    }

    .k-grid .k-grid-search {
        width: 100%;
        margin-left: 0;
        margin-top: @grid-header-padding-y;

        // Remove top margin if search is the first child within the grid toolbar
        &:first-child {
            margin-top: 0;
        }
    }
}

.k-grid-mobile {
    border-width: 0;

    .k-resize-handle-inner::before {
        content: "\e01e";
        position: absolute;
        // The Calc is needed due to the the negative margin
        // that removes the double bottom border of the header
        top: calc(50% - 1px);
        left: 50%;
        transform: translate(-50%, -50%);
        padding: .2em;
    }

    .k-edit-cell > input,
    .k-edit-cell > select,
    .k-grid-edit-row > td > input,
    .k-grid-edit-row > td > select {
        width: 100%;
        box-sizing: border-box;
    }

    .k-header a {
        -webkit-touch-callout: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        -webkit-user-drag: none;
        -moz-user-drag: none;
    }
}

// Adaptive Scheduler

.k-pane-wrapper {

    .k-scheduler-edit-form {

        .k-recur-items-wrap {
            width: 100%;
            margin: -1px 0;
        }

        .k-scheduler-recur-end-wrap {
            white-space: nowrap;
        }
    }
}

.k-scheduler-mobile {
    border-width: 0;

    th {
        font-weight: normal;
    }

    .k-scheduler-toolbar {
        display: flex;
        justify-content: space-between;

        .k-scheduler-tools {
            margin: 0;

            .k-button {
                padding: 4px;

                span {
                    margin: 0;
                }
            }
        }

        .k-i-calendar {
            display: inline-block;
        }

        .k-scheduler-navigation {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 0;

            .k-nav-prev,
            .k-nav-current,
            .k-nav-next {
                border: 0;
                background: none;
                display: flex;
                line-height: 1.5;
                align-items: center;
                justify-content: space-evenly;
            }

            .k-y-date-format {
                font-size: 9px;
            }

            .k-nav-current {
                flex-direction: column;
            }
        }
    }

    .k-scheduler-footer {
        display: flex;
        justify-content: space-between;
    }

    .k-scheduler-monthview {

        .k-hidden {
            height: 40px;
        }

        .k-scheduler-table td {
            height: 40px;
            vertical-align: top;
            text-align: center;
        }

        .k-events-container {
            position: absolute;
            text-align: center;
            height: 6px;
            line-height: 6px;
        }

        .k-event {
            position: static;
            display: inline-block;
            width: 4px;
            height: 4px;
            min-height: 0;
            margin: 1px;
        }
    }

    // Removing the "Days" header from the Mobile Scheduler will break the Web Scheduler
    // Thus, the below selector is needed
    .k-scheduler-dayview .k-mobile-header {

        .k-scheduler-times table tr:first-child {
            display: none;
        }

        .k-scheduler-header table:not(.k-scheduler-header-all-day) tr:last-child {
            display: none;
        }
    }

    .k-scheduler-agendaview {
        .k-mobile-header {
            display: none;
        }

        .k-scheduler-table {
            table-layout: auto;

            .k-scheduler-groupcolumn {
                width: 1%;
            }
        }
    }

    .k-mobile-header {
        .k-scheduler-table td,
        .k-scheduler-table th {
            height: 1.5em;
        }
    }

    .k-time-text,
    .k-time-period {
        display: block;
        line-height: 1;
    }

    .k-time-period {
        font-size: .7em;
    }

    .k-scheduler-table td,
    .k-scheduler-table th {
        height: 2em;
        vertical-align: middle;
    }

    .k-scheduler-times th {
        font-size: 1em;
    }

    .k-scheduler-datecolumn-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .k-task {
        display: flex;
        align-items: center;

        .k-scheduler-mark {
            border-radius: 50%;
        }

        .k-i-reload {
            font-size: 1em;
            margin-right: .5em;
        }

        .k-scheduler-task-text {
            flex: 1 1 0%;
        }
    }

    .k-scheduler-times,
    .k-scheduler-agenda {

        .k-scheduler-group-cell,
        .k-scheduler-groupcolumn {
            vertical-align: top;

            .k-scheduler-group-text {
                writing-mode: tb;
                transform: rotate(180deg);
                white-space: nowrap;
            }
        }
    }

    .k-scrollbar-h tr + tr .k-scheduler-times {
        border-bottom-width: 0;
    }
}

// Adaptive Grid & Scheduler

.k-pane-wrapper {
    .k-pane * {
        background-clip: border-box;
    }

    .k-mobile-list {

        &,
        ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
            border-radius: 0;
            background: none;
        }

        &.k-column-menu,
        &.k-filter-menu {

            > ul > li {

                &,
                > ul {
                    margin: 1em 0;
                }

                .k-list-title,
                .k-filter-help-text {
                    display: block;
                    padding: 1em 1em 0 1em;
                }
            }
        }

        &.k-popup-edit-form {

            > ul {
                margin-top: 1em;
            }
        }

        &.k-scheduler-edit-form .k-content > ul {
            margin: 1em 0;
        }

        .k-item {

            > * {
                line-height: normal;
            }

            &,
            > .k-link,
            > .k-label {
                display: flex;
                align-items: center;
                position: relative;
                list-style-type: none;
                .box-sizing(border-box);
                font-size: 1em;
                line-height: 1.6em;
                overflow: visible;
                text-decoration: none;
            }

            > .k-link,
            > .k-label {
                padding: .5em 1em;
                flex: 1 1 auto;
                max-width: 100%;
            }

            .k-item-title,
            .k-filter-input-text,
            .k-filter-operator-text,
            .k-filter-logic-and-text,
            .k-filter-logic-or-text {
                width: 40%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &.k-recur-view {
                align-items: normal;
                flex-direction: column;
            }
        }

        &.k-column-menu {

            .k-item {

                .k-link,
                .k-label {
                    justify-content: flex-start;
                }

                &.k-filter-item {

                    .k-filterable::before {
                        content: "\e014";
                        position: absolute;
                        right: .5em;
                        font: 1.5em/1 'WebComponentsIcons';
                    }
                }
            }

            .k-columns-item {

                .k-item {
                    padding: .5em 1em;
                    justify-content: space-between;

                    .k-label {
                        flex: 0 1 auto;
                        padding: 0;
                        pointer-events: none;
                    }
                }
            }
        }

        &.k-filter-menu {

            .k-item {

                > .k-link,
                > .k-label {
                    justify-content: space-between;

                    > input,
                    > select {
                        min-width: 50%;
                        max-width: 50%;
                        font-size: 100%;
                    }

                    .k-check,
                    .k-radio-label {
                        flex: 0 1 auto;
                        min-width: 0;
                    }
                }

                .k-radio-label {

                    &::before,
                    &::after {
                        transform: translateY(-50%);
                    }

                    &::after {
                        top: 0;
                    }
                }
            }

            .k-space-right {
                border: 0;
                padding: 0 10px;
                background: 0;

                > input {
                    width: 100%;
                    height: 2em;
                    padding: 1px 0;
                    margin: 0;
                    border-radius: 3px;
                    text-indent: 1em;
                    border-width: 1px;
                    border-style: solid;
                }

                > .k-i-zoom {
                    right: 15px;
                    z-index: 2;
                }
            }

            .k-filter-tools {
                margin: 1em;
                display: flex;
                justify-content: space-between;
            }
        }

        &.k-popup-edit-form {

            .k-item {

                > .k-label {
                    justify-content: space-between;

                    > div {

                        &,
                        .k-mobiletimezoneeditor {
                            width: 50%;
                            display: flex;
                            position: relative;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 100%;
                            text-align: end;
                        }

                        select,
                        input:not([type="checkbox"]),
                        .k-mobiletimezoneeditor {
                            flex: 1 1 auto;
                            min-width: 100%;
                            max-width: 100%;
                        }

                        &.k-recur-editor-wrap {
                            display: flex;

                            .k-recur-editor-text {
                                margin-left: .5em;
                            }

                            select,
                            input:not([type="checkbox"]) {
                                min-width: 50%;
                            }
                        }

                        .k-tooltip-validation {
                            top: 100%;
                            left: 0;
                        }
                    }
                }
            }
        }

        .k-multicheck-wrap,
        .k-multicheck-bool-wrap {
            // Overriding the Web multicheck-wrap max-height
            max-height: none;

            .k-item {

                .k-link,
                .k-label {
                    white-space: normal;
                    flex-direction: row-reverse;
                }
            }
        }

        .k-state-disabled {
            opacity: 1;

            > * {
                opacity: .7;
            }
        }
    }
}

// Mobile list form elements

.k-check[type=radio],
.k-check[type=checkbox] {
    appearance: none;
    background-color: transparent;
}

.k-pane-wrapper {

    .k-mobile-list {

        .k-link,
        .k-label {

            .k-check {
                border-width: 1px;
                border-style: solid;
                font-size: inherit;
                outline: 0;
                width: 13px;
                height: 13px;
                margin: .26em 1em .26em 0;
            }
        }
    }

    .k-ie & {

        .k-link,
        .k-label {

            .k-check {
                text-indent: -9999px;
                width: 1.01em;
                height: 1em;
            }
        }

        .k-grid {

            .k-icon {
                text-indent: 0;
            }
        }
    }
}

// Pager

.k-pane-wrapper .k-pager-wrap.k-pager-sm {
    justify-content: center;

    .k-pager-refresh {
        display: none;
    }

    .k-current-page .k-link {
        line-height: .9em;
    }

}

// Mobile Scroller

.km-scroll-container {
    .prohibit-selection;
    -webkit-margin-collapse: separate;
    -webkit-transform: translatez(0);
}

.k-widget .km-scroll-wrapper {
    position: relative;
    padding-bottom: 0;
}

.km-touch-scrollbar {
    position: absolute;
    visibility: hidden;
    z-index: 200000;
    height: .3em;
    width: .3em;
    background-color: rgba(0,0,0,.7);
    opacity: 0;
    .transition("opacity 0.3s linear");
}

.km-vertical-scrollbar {
    height: 100%;
    right: 2px;
    top: 2px;
}

.km-horizontal-scrollbar {
    width: 100%;
    left: 2px;
    bottom: 2px;
}

// RTL

.k-pane-wrapper {

    .k-rtl &,
    &[dir="rtl"],
    [dir="rtl"] & {

        .k-grid-edit-form,
        .k-grid-column-menu,
        .k-grid-filter-menu,
        .k-scheduler-edit-form {

            > .k-header {
                flex-direction: row-reverse;
            }
        }

        .k-mobile-list {

            &.k-column-menu {

                .k-item.k-filter-item {

                    .k-filterable::before {
                        content: "\e016";
                        right: auto;
                        left: .5em;
                    }
                }
            }

            &.k-filter-menu {

                .k-space-right > .k-i-zoom {
                    left: 15px;
                    right: auto;
                }
            }
        }

        .k-scheduler-mobile {

            .k-scheduler-toolbar {

                > ul > li {
                    border: 0;
                }

                .k-nav-prev,
                .k-nav-next {
                    transform: scaleX(-1);
                }
            }

            .k-task .k-i-reload {
                margin-left: .5em;
                margin-right: 0;
            }
        }

        .k-scheduler-edit-form .k-item .k-i-arrow-chevron-right {
            transform: scaleX(-1);
        }
    }
}