/* 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;
        height: 320px;
        max-height: 320px;
    }

    #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. Since FF 113, this no longer has any
         * effect, but it doesn't seem to be necessary either. */
        -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 { /* before FF 102 or earlier */
        /* Use the whole height */
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
    }
    #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */
        /* Use the whole height */
        height: 300px !important;
        max-height: 300px !important;
    }

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