/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/******************************************/
/*               IMPORTANT:               */
/*                                        */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar.         */
/*                                        */
/* For the best results, consider moving  */
/* the Unified Extensions Menu button to  */
/* the left of the URL Bar and removing   */
/* less important toolbar items by using  */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile.  */
/******************************************/

/* Apply this customization only on smaller screens */
@media (max-width: 700px) {

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --PanelUI-menu-button-position: 4px;
        --alltabs-button-height: 32px;
        --alltabs-button-width: 32px;
        --alltabs-button-position: 4px;
        --urlbar-width: calc(100vw - 166px);
    }
    :root[uidensity="touch"] {
        --PanelUI-menu-button-position: 5px;
        --alltabs-button-height: 34px;
        --alltabs-button-width: 34px;
        --alltabs-button-position: 5px;
        --urlbar-width: calc(100vw - 171.5px);
    }

    /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
    #PanelUI-menu-button {
        position: absolute !important;
        right: 0px !important;
        bottom: var(--PanelUI-menu-button-position) !important;
    }

    /* Hide Tab Bar and Private Browsing Indicator */
    #tabbrowser-tabs,
    #private-browsing-indicator-with-label {
        visibility: collapse !important;
    }

    /* Move Tab Manager Menu button to right of urlbar */
    :root {
        --tab-border-radius: var(--toolbarbutton-border-radius) !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack {
        height: var(--alltabs-button-height) !important;
        width: var(--alltabs-button-width) !important;
    }
    #alltabs-button {
        position: absolute;
        top: var(--alltabs-button-position) !important;
        right: 41.5px;
        z-index: 2 !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack::before {
        bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
    }

    /* Allow room for Tab Manager Menu button */
    #nav-bar {
        padding-right: 67px !important;
    }

    /* Reduce URL Bar width */
    #urlbar-container {
        max-width: var(--urlbar-width) !important;
    }

}