/* Copyright 2022 Peter Mack, Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

@media (max-width: 700px) {
    /* Even when not in private browsing mode, reserve space to the right of
     * the tab bar for the private-browsing-indicator (that mask icon). This
     * gives the tab bar a consistent width in both the regular and the private
     * browsing mode, so the increased width hack below looks good in both. */
    /*#titlebar {
        padding-right: 30px;
    }
    hbox.private-browsing-indicator {
        position: fixed !important;
        right: 0px;
        bottom: 50px;
        display: block;
    }*/

    /* Increase tab width, to have more space for displaying the title of the
     * website and to make the "all tabs" button show up. */
    /*#tabbrowser-tabs {
        --tab-min-width: calc(100vw - 116px) !important;
    }*/

    /* Rotate the arrow on the "all tabs" button to point upwards, since the
     * tabs and searchbar were moved to the bottom. */
    /*#alltabs-button {
        transform: rotate(180deg) !important;
    }*/

    /* All tabs menu: hide scroll buttons */
    /*#scrollbutton-up,
    #scrollbutton-down {
        display: none !important;
    }*/

    /* All tabs menu: hide the search and the separator below it. */
    #allTabsMenu-searchTabs,
    #allTabsMenu-tabsSeparator {
        display: none;
    }

    /* Similar hack to what's in appMenu.css to properly spawn the "all tabs"
     * popup above the navigation menu */
    #customizationui-widget-panel {
        /* Further up than appmenu, because the "all tabs" button that spawns
         * this menu is above the hamburger button that spawns the regular
         * menu. */
        /*margin-top: -360px !important;*/
        margin-bottom: 15px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        /*height: 320px;*/
        /*max-height: 320px;*/
        height: 333px;
        max-height: 333px;
    }

    /*#allTabsMenu-allTabsView vbox.panel-subview-body {
        /* Use the whole height */
        /*height: 300px !important;
        /*max-height: 300px !important;
        /* When messing around with tabs, it gets into a state where it does
         * not use the whole height anymore, it becomes a tiny window. Removing
         * this attribute fixes it. */
        /*-moz-box-flex: initial !important;
    }*/

    /*#allTabsMenu-allTabsView vbox.panel-subview-body:first-child {
        /* the allTabsMenu has a vbox.panel-subview-body inside another one.
         * With -moz-box-flex: initial, it will show a scroll bar in each, but
         * we only want one scrollbar. */
        /*overflow-y: hidden !important;
    }*/

    #allTabsMenu-multiView box.panel-viewstack {
        /* Use the whole height */
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
    }

    #allTabsMenu-allTabsViewTabs {
        /* Make sure tabs with long titles don't exceed the all tabs menu */
        width: 0;
        max-width: calc(100vw - 20px);
    }
}