@import (reference) "breakpoints.less";
@import (reference) "visibility.less";

@header-bar-container-height:40px;

@responsive-menu-width: 270px;
@responsive-menu-shadow-width: 6px;
@responsive-menu-shadow-color: rgba(0, 0, 0, 0.5);

// Responsive main navigation (hamburger navigation to the left)
#responsive-container {
    display: none;
    user-select: none;

    input[type="checkbox"] {
        display: none;
    }
    label[for="responsive-toggle"]:first-child {
        .icon('before', 'hamburger-icon', 'info_alt', 20);
        cursor: pointer;
    }

    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li {
        border-top: 1px solid @brand-color-lighter;
    }
    a {
        color: white;
        &:hover {
            color: white;
        }
    }

    .nav-label {
        .hide-text();
        .icon('before', 'arr_1right', 'info_alt', 24);
        &:before {
            transition: transform 300ms;
            vertical-align: text-bottom;
        }

        position: absolute;
        left: 5px;
        top: 5px;

        border-right: 1px solid @brand-color-lighter;
        padding-right: 2px;
    }

    // Create second, invisible toggle that closes the menu when clicked/touched
    // outside of the menu
    label[for="responsive-toggle"]:last-child {
        display: none;

        position: fixed;
        top: @header-bar-container-height;
        right: 0;
        bottom: 0;
        left: @responsive-menu-width;
        height: 100vh;
    }
}

#responsive-navigation {
    #gradient > .horizontal(@brand-color-darker, @brand-color-light);
    background-clip: content-box;
    transition: left 300ms;


    left: (-@responsive-menu-width - @responsive-menu-shadow-width);
    &.visible {
        left: 0;

        + label[for="responsive-toggle"] {
            display: initial;
        }
    }

    position: fixed;
    top: @header-bar-container-height; // + 1px white border
    bottom: 0;
    height: calc(100vh - @header-bar-container-height);

    box-sizing: border-box;
    max-width: @responsive-menu-width;
    width: @responsive-menu-width;
    margin-bottom: @header-bar-container-height;

    border-right: @responsive-menu-shadow-width solid @responsive-menu-shadow-color;
    overflow: auto;

    > li {
        &:first-child {
            border-top: none;
        }

        .icon {
            .square(26px);
            display: inline-block;
            padding-right: 8px;
            vertical-align: text-bottom;
            width: 26px;
        }

        > .navigation-item {
            font-size: 1.3em;
            margin: 10px;
        }
    }

    .navigation-item {
        position: relative;
    }

    .nav-title {
        display: block;
        padding-left: 34px;
        a {
            display: block;
            padding: 5px;
        }
    }

    ul {
        transition: max-height 400ms ease;

        max-height: 0px;
        overflow: hidden;
        > li {
            background-color: @brand-color-lighter;
            > .navigation-item {
                padding: 10px;
            }
        }

        .icon {
            display: none;
        }
    }
    input:checked + label::before {
        transform: rotate(90deg);
    }

    input:checked + label + ul {
        max-height: 600px;
        > li {
            background-color: mix(rgba(0, 0, 0, 0.2), @brand-color-lighter);
        }
    }
}

// Responsive sidebar menu (small hamburger menu to the right)
#barBottomright #sidebar-menu {
    .icon('before', 'hamburger-icon-small', 'info_alt', 20);
    cursor: pointer;
    display: none;
    margin: 0 2px;
    text-align: right;
    vertical-align: top;
}


/* @deprecated use .hidden-medium-up */
.media-breakpoint-medium-up({
    .responsive-visible {
        display: none;
    }
});

.responsive-display {
    // Hide sidebar from view until .responsified
    &:not(.responsified) {
        #layout-sidebar {
            display: none;
        }
    }

    .media-breakpoint-small-down({
        #header, #flex-header, #barTopFont, #barTopMenu,
        #barBottomLeft .current_page, #barBottommiddle, #barBottomLeft, #barBottomArrow,
        #tabs, .sidebar-image, #sidebar-navigation:not(.show), #barTopFont, #footer, .sidebar-widget-header,
        .tabs_wrapper .colorblock {
            display: none !important;
        }

        #layout_wrapper #layout_page {
            .secondary-navigation {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;

                background-color: @dark-gray-color-10;
                border-bottom: 1px solid @dark-gray-color-40;

                .colorblock,
                #layout_context_title,
                .context_icon,
                .tabs_wrapper {
                    transition: unset;
                }

                #layout_context_title,
                .tabs_wrapper {
                    background: transparent;
                    border-width: 0;
                    flex: 1;
                }

                #layout_context_title {
                    flex: 1;

                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    + .tabs_wrapper {
                        flex: 0;
                        align-self: flex-end;
                    }
                }
            }
        }
        #layout_wrapper #layout_page .tabs_wrapper {
            justify-content: flex-end;
            .helpbar-container {
                top: 0px;
                right: 6px;
            }
        }
        .responsive-hidden {
            display: none;
        }
        #notification_marker {
            display: inline-block;
            margin-top: 0;
            vertical-align: initial;

            width: 22px;
            padding-left: 5px;
            padding-right: 5px;
            height: 20px;
            line-height: 20px;
        }

        #barTopAvatar {
            position: relative;
            bottom: 0px;
            right: 0px;
            line-height: 20px !important;

            #header_avatar_menu {
                display: none;
            }

            &::after {
                display: none !important;
            }
        }

        #barBottomContainer {
            box-sizing: border-box;
            height: @header-bar-container-height;
            position: fixed;
            top: 0;
            margin-left: 0px;
            margin-right: 0px;
            width: 100%;
        }

        #barBottomright, #barBottomright ul {
            box-sizing: border-box;
            flex: 1;
        }

        #barBottomright {
            flex: 1 !important;
            #sidebar-menu {
                display: inline-block;
            }
            .list {
                &::before, &::after {
                    display: none;
                }
                @width: 300px;
                @arrow-height: 10px;

                margin-top: 2px;
                width: @width;
                max-width: @width;

                &.below {
                    left: (-@width + 90);
                    &:before {
                        left: (@width - 90);
                    }
                }

            }

            > ul > li {
                flex: 1 0 auto;

                &:first-child {
                    flex: 1 1 100%;
                }
            }
        }

        #notification_container {
            position: inherit !important;
            /*top: 8px;*/
            width: 32px;
            height: 20px;
        }

        #responsive-container {
            display: block;
        }

        #layout_page {
            margin-left: 0;
            margin-right: 0;
        }

        #layout_page, #layout_container, #barBottomContainer, #flex-header, #layout_content {
            min-width: inherit !important;
        }

        #layout_container {
            margin-left: 0px;
            margin-right: 0px;
        }

        #layout_content {
            margin: 0px 4px;
        }

        .visible-sidebar {
            right: 0 !important;
            transition: right 300ms;
        }
        #layout-sidebar.visible-sidebar #sidebar-shadow-toggle {
            display: initial;
        }

        #layout-sidebar {
            #gradient > .horizontal(@brand-color-light, @brand-color-darker);
            background-clip: content-box;
            transition: right 300ms;

            position: fixed;
            top: @header-bar-container-height;
            right: (-@responsive-menu-width - @responsive-menu-shadow-width);
            left: auto;
            bottom: 0;

            margin-right: 0px;

            width: @responsive-menu-width;

            overflow: hidden;
            overflow-y: auto;
            z-index: 10000;

            border-left: @responsive-menu-shadow-width solid @responsive-menu-shadow-color;

            .sidebar {
                box-sizing: border-box;

                &:before {
                    border: 0 !important;
                }

                top: auto !important;
                width: @responsive-menu-width !important;

                background: inherit;
                border: 0;
            }

            .widget-links li.active {
                &:before, &:after {
                    display: none;
                }
                margin-right: 0;
            }

            // Create second, invisible toggle that closes the menu when
            // clicked/touched outside of the menu
            #sidebar-shadow-toggle {
                position: fixed;
                top: @header-bar-container-height;
                right: @responsive-menu-width;
                bottom: 0;
                left: 0;
                height: 100vh;

                display: none;
            }
        }
        #index,
        #login,
        #request_new_password,
        #web_migrate {
            div.index_container {
                height: calc(100% - 74px);
                position: static;
                top: 0;

                div.messagebox,
                div.index_main {
                    margin: 1em auto;
                }
            }

            #background-desktop,
            #background-mobile {
                position: fixed;
            }
        }

        #layout_footer {
            display: block;
            min-width: 0;
            width: 100vw;
        }
    });

    .media-breakpoint-tiny-down({
        #index,
        #login,
        #request_new_password,
        #web_migrate {
            div.index_container {
                div.messagebox,
                div.index_main {
                    margin: 0 auto;
                }
            }
        }
    });
}

// Hide duplicated avatar menu in sidebar as default
.sidebar-avatar-menu {
    display: none;
    margin-top: 0 !important;
}

.responsive-display {
    .sidebar-avatar-menu {
        display: block;
    }

    #quicksearch_item {
        padding: 0;
    }
    #search_sem_quick_search_frame {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        .quicksearchbox {
            transition: all 300ms;
            opacity: 0;
            max-width: 0;
        }

        &.open {
            .quicksearchbox {
                opacity: 1;
                max-width: 1000px;
                width: 100% !important;
            }
        }
    }

    #barBottomright {
        ul {
            li:first-child {
                flex: 1 0 auto;
            }
            li#quicksearch_item {
                flex: 1 1 100%;
            }
        }
    }

    table.default tfoot .button {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .ui-dialog.ui-widget.ui-widget-content.studip-confirmation {
        min-width: 20vw;
        max-width: 100vw;
    }
}