/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

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

    /* Show a number before tab text */
    /* Actually, let's show the tab number after tab content, right-align it,
         and fix its position directly on the tab close button */
    #tabbrowser-tabs {
        counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
    }
    .tabbrowser-tab:not([pinned]) .tab-content::after {
        content: counter(nth-tab) " ";
        counter-increment: nth-tab;
        position: absolute !important;
        position: fixed;
        right: 24px;
        top: 12px;
        width: 0 !important;
    }

    /* Shorten tab content width so that tab number is more visible */
    .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
        width: calc(100vw - 150px) !important;
    }

    /* Hide tab number when hovering so that tab close button is clickable */
    .tabbrowser-tab:not([pinned]):hover .tab-content::after {
        visibility: hidden !important;
    }

    /* Adjust tab close button opacity, border, and shape */
    .tab-close-button {
        position: absolute !important;
        margin-right: -8px !important;
        opacity: 0.5 !important;
        border: 2px solid white !important;
        height: 36px !important;
        width: 36px !important;
    }

}