phi.css

/* φ Phi (/faɪ/)
 * The ultimate vertical experience theme for Vivaldi, made with attention to details.
 * Version 2026_05_24.0
 *
 * Last Linux test   : Phi current on Vivaldi v8.0.4033.34
 * Last Windows test : Phi 2025_05_09.0 on Vivaldi v7.3.3635.12
 * Last Mac test     : Phi current on Vivaldi v8.0.4033.34
 *
 * (C) 2025 — KaKi87
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * https://git.kaki87.net/KaKi87/phi-for-vivaldi
 */

 /*┌──────────────────┐
   │User customization│
   └──────────────────┘*/

:root
{
    --phi--sidebar-width: 210;
    --phi--compact-sidebar-width: 50;
    --phi--is-auto-compact-mode: 0;
    --phi--is-phi-menu-icon: 1;
    --phi--toolbar-column-count: 5;
    --phi--address-bar-focused-width-increase: 200;
    --phi--address-bar-font-size-decrease: 1;
    --phi--is-address-bar-focused-height-increase: 1;
    --phi--is-address-bar-unfocused-partial: 0;
    --phi--is-address-bar-unfocused-hide-icons: 1;
    --phi--is-address-bar-focused-hide-icons: 0;
    --phi--pinned-column-count: 4;
    --phi--webview-border: 0;
    --phi--webview-border-radius: 0;
    --phi--webview-shadow-size: 0;
    --phi--webview-shadow-color: 0, 0, 0, 0.25;
    --phi--is-individual-tiled-tab-header: 0;
    --phi--is-hide-window-controls: 0;
    --phi--is-hide-content-blocker: 1;
}

/*
 * You may copy the above settings in a separate 'phi-custom.css'
 * while replacing ':root' with 'body' to persist your customizations when updating.
 * See the README for detailed instructions.
 */
@import './phi-settings.css';

/*┌───────────┐
  │Source code│
  └───────────┘*/

.minimal-ui
{
    .toolbar-mainbar[aria-label],
    #panels-container,
    &.linux #header,
    &.win #header
    {
        display: none !important;
    }
}

#app:has(#browser:not(.inner, .minimal-ui, .popup, .tabs-top, .tabs-bottom, .break-mode, .tabs-off))
{
    &:has(#panel_switch) { --phi___is-compact-mode: 1; }
    &:has(.toolbar-panel .button-toolbar.active) { --phi___is-panel-open: 1; }
    &:not(:has(.panel-collapse-guard)), &:has(.panel-collapse-guard[aria-hidden="true"]) { --phi___is-panel-closed: 1; }
    &:has(.auto-hide) { --phi__is-auto-hide: 1; }
    &:has(.auto-hide-visible), &:has(.auto-hide-wrapper:hover) { --phi__is-auto-hide-visible: 1; }

    .separator-wsbutton,
    .is-pinned .title,
    .tab-group .title:not(:has(.tab-title-edit)),
    #tabs-tabbar-container .SlideBar,
    #panel_switch
    {
        display: none !important;
    }

    @container style(--phi--is-auto-compact-mode: 1)
    {
        --phi___is-compact-mode: 1;

        &:has(
            [name="WorkspaceButton"]:hover,
            .toolbar-mainbar[aria-label]:hover,
            #tabs-container:hover,
            .toolbar-panel:hover
        )
        {
            --phi___is-compact-mode: 0;
        }
    }

    @container style(--phi--is-hide-content-blocker: 1)
    {
        .ContentBlocker-Control
        {
            display: none;
        }
    }

    #main,
    #titlebar,
    .tabbar-wrapper,
    #tabs-tabbar-container,
    .workspace-popup,
    .mainbar,
    .mainbar > div,
    #panels,
    #switch,
    .tab-position,
    #main > .inner,
    .auto-hide,
    .auto-hide-wrapper,
    .auto-hide-wrapper:before
    {
        display: contents !important;
    }

    #browser
    {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
    }

    #browser.tabs-left
    {
        grid-template-columns: calc(var(--phi--sidebar-width) * 1px) auto;
        --phi__sidebar-order: 1;
        --phi__page-order: 2;

        &:has(.auto-hide-wrapper):not(.auto-hide-visible):not(:has(.auto-hide-wrapper:hover))
        {
            grid-template-columns: 0 auto;
        }
    }

    #browser.tabs-right
    {
        grid-template-columns: auto calc(var(--phi--sidebar-width) * 1px);
        --phi__sidebar-order: 2;
        --phi__page-order: 1;

        &:has(.auto-hide-wrapper):not(.auto-hide-visible):not(:has(.auto-hide-wrapper:hover))
        {
            grid-template-columns: auto 0;
        }
    }

    @container style(--phi___is-compact-mode: 1)
    {
        #browser.tabs-left
        {
            grid-template-columns: calc(var(--phi--compact-sidebar-width) * 1px) auto;
        }

        #browser.tabs-right
        {
            grid-template-columns: auto calc(var(--phi--compact-sidebar-width) * 1px);
        }
    }

    #webview-container
    {
        grid-column: var(--phi__page-order) / span 1;
    }

    [name="WorkspaceButton"],
    .toolbar-mainbar[aria-label],
    #tabs-container,
    .toolbar-panel
    {
        grid-column: var(--phi__sidebar-order) / span 1;
    }

    &:has(.auto-hide):not(:has(.auto-hide-visible)):not(:has(.auto-hide-wrapper:hover))
    {
        [name="WorkspaceButton"],
        .toolbar-mainbar[aria-label],
        #tabs-container,
        .toolbar-panel
        {
            opacity: 0;
            max-width: 0;
            overflow: hidden;
        }
    }

    #webview-container           { grid-row: 1 /     -1; }
    .toolbar-mainbar[aria-label] { grid-row: 1 / span 1; }
    [name="WorkspaceButton"]     { grid-row: 2 / span 1; }
    #tabs-container              { grid-row: 3 / span 1; }
    .toolbar-panel               { grid-row: 4 / span 1; }

    .window-buttongroup
    {
        position: relative !important;
        left: unset !important;
        right: unset !important;
        grid-row: 1 / 2;
        grid-column: 1 / -1;
        background-color: transparent;
    }

    .vivaldi
    {
        position: relative;
        top: unset !important;
        margin-left: 5px !important;
        margin-right: 0 !important;
        padding: 0;
        justify-self: center;
    }

    @container style(--phi--is-phi-menu-icon: 1)
    {
        .vivaldi-v svg
        {
            display: none;
        }
        .vivaldi-v
        {
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='238 238 24 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='7.482' x2='18.941' y1='4.223' y2='24.076' gradientTransform='translate(238 238)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='.2'/%3E%3Cstop offset='.79' stop-opacity='.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23EF3939' d='M250 262c5.258 0 8.181 0 10.09-1.91C262 258.181 262 255.259 262 250c0-5.259 0-8.181-1.91-10.09C258.181 238 255.258 238 250 238c-5.259 0-8.185 0-10.09 1.91-1.906 1.909-1.91 4.831-1.91 10.09 0 5.259 0 8.181 1.91 10.09C241.819 262 244.741 262 250 262Z' pointer-events='none'/%3E%3Cpath fill='url(%23a)' d='M257.802 245.559c-.579-1.044-1.576-1.899-2.514-2.639-.938-.739-1.859-1.185-3.01-1.504-1.151-.32-2.328-.314-3.513-.164s-2.205.421-3.24 1.017c-1.035.597-1.839 1.327-2.562 2.278-.724.95-1.205 1.893-1.505 3.049-.301 1.156-.41 2.437-.239 3.619.17 1.182.376 2.307.99 3.332l.051.087 4.227 7.328c.702.019 1.461.027 2.278.025h1.201a56.21 56.21 0 0 0 5.746-.17c1.913-.21 3.287-.68 4.339-1.739 1.548-1.547 1.841-3.76 1.895-7.339l-4.144-7.18Z' pointer-events='none'/%3E%3Cpath fill='%23fff' d='M258.313 246.553a9.003 9.003 0 0 1 0 6.894 8.987 8.987 0 0 1-1.956 2.92 9 9 0 0 1-9.805 1.947A8.995 8.995 0 0 1 241 250a8.995 8.995 0 0 1 5.552-8.314 8.998 8.998 0 0 1 11.761 4.867Zm-9.991-2.476a4.826 4.826 0 0 0-1.928 1.28 4.867 4.867 0 0 0-1.186 2.333 5.442 5.442 0 0 0-.089 1.124 4.835 4.835 0 0 0 1.223 3.036c.028.037.069.072.099.111.485.51 1.079.92 1.735 1.175.129.052.263.096.393.14.048.632.136 1.261.275 1.879.041.168.081.339.144.501a.852.852 0 0 0 .307.393.777.777 0 0 0 .566.104.823.823 0 0 0 .456-.263.79.79 0 0 0 .179-.501c-.014-.219-.099-.424-.141-.637a10.952 10.952 0 0 1-.204-1.271l.011-.009a4.778 4.778 0 0 0 2.389-.746 5.006 5.006 0 0 0 1.493-1.477 4.99 4.99 0 0 0 .525-1.067c.062-.189.128-.376.181-.568.072-.248.112-.504.126-.765 0-.056.001-.113.009-.169v-.326c-.009-.052-.009-.105-.012-.16a3.23 3.23 0 0 0-.101-.646 4.903 4.903 0 0 0-.541-1.328 2.939 2.939 0 0 0-.334-.451 2.273 2.273 0 0 0-.741-.549 2.584 2.584 0 0 0-.956-.214 2.36 2.36 0 0 0-.984.194 2.775 2.775 0 0 0-.928.665 3.844 3.844 0 0 0-.544.729c-.297.515-.507 1.079-.674 1.649-.299 1.037-.453 2.11-.511 3.185-.009.055-.003.111-.016.165a3.195 3.195 0 0 1-.705-.455 3.32 3.32 0 0 1-1.021-1.554 2.984 2.984 0 0 1-.126-.791 4.648 4.648 0 0 1 .002-.457 3.274 3.274 0 0 1 1.573-2.511c-.005.058-.003.116-.003.173a.808.808 0 0 0 .288.545.77.77 0 0 0 .712.145.867.867 0 0 0 .313-.19 1.7 1.7 0 0 0 .153-.153c.181-.199.355-.407.502-.631.1-.157.19-.32.251-.496.081-.227.112-.478.036-.708a.98.98 0 0 0-.407-.521 1.23 1.23 0 0 0-.669-.157c-.074.005-.149.006-.222.017a4.638 4.638 0 0 0-.898.228Zm3.756 2.491c.119 0 .243-.012.351.041l.02.008a.151.151 0 0 0 .036.018c.013.009.026.014.038.02a.858.858 0 0 1 .271.219c.066.076.118.164.17.249.04.076.075.15.113.227.022.052.042.106.067.158.065.189.112.385.135.584.05.363.033.734-.046 1.091-.019.107-.053.212-.082.318-.014.039-.023.074-.035.113-.019.032-.028.069-.039.104a.135.135 0 0 0-.019.045 1.139 1.139 0 0 0-.045.112c-.022.042-.042.08-.057.123a.154.154 0 0 0-.02.038.255.255 0 0 0-.019.037c0 .003-.007.012-.009.018a3.503 3.503 0 0 1-.465.685c-.031.044-.073.077-.105.119-.055.064-.12.119-.182.176-.18.163-.376.302-.586.424-.106.055-.211.111-.319.156-.065.029-.132.052-.196.078-.037.012-.076.023-.113.038-.076.019-.152.045-.23.061a4.806 4.806 0 0 1-.607.091c-.004-.103.011-.206.009-.311.008-.056.008-.111.012-.167.008-.054.002-.114.012-.168.035-.474.077-.946.158-1.412.075-.443.178-.883.309-1.314l.101-.309c.016-.034.025-.069.036-.103l.13-.317c.022-.042.043-.081.057-.122.005-.007.008-.016.01-.021a.251.251 0 0 1 .011-.017.138.138 0 0 1 .008-.02c.003-.005.008-.013.01-.019l.009-.018c.002-.004.008-.014.008-.019.1-.186.209-.371.342-.536.102-.123.217-.239.349-.326.066-.044.139-.077.209-.111a.438.438 0 0 1 .193-.041Z'/%3E%3C/svg%3E") center right/calc(100% - 5px) no-repeat;
        }
    }

    .toolbar-mainbar[aria-label],
    #tabs-container
    {
        padding: 0 5px !important;
    }

    .toolbar-mainbar[aria-label]
    {
        --phi__address-bar-row: 2;
        --phi__extensions-row: 3;
        &:has(.window-buttongroup)
        {
            --phi__address-bar-row: 3;
            --phi__extensions-row: 4;
        }

        width: 100%;
        height: auto !important;
        display: grid;
        grid-template-rows: 1fr 1fr auto;
        grid-template-columns: repeat(var(--phi--toolbar-column-count), calc(100% / var(--phi--toolbar-column-count)));

        -webkit-app-region: drag;
    }

    #tabs-container > .resize
    {
        max-height: 100% !important;
    }

    &:has(.window-buttongroup)
    {
        .toolbar-mainbar[aria-label]
        {
            --phi__window-controls-row-height: 1fr;
            --phi__address-bar-row: 3;
            --phi__extensions-row: 4;
            grid-template-rows: var(--phi__window-controls-row-height) 1fr 1fr auto;
        }

        #browser.mac.tabs-left .toolbar-mainbar[aria-label]
        {
            --phi__window-controls-row-height: 40px;
        }

        #browser.mac.tabs-right .toolbar-mainbar[aria-label]
        {
            --phi__window-controls-row-height: 0;
        }
    }

    #browser.mac .window-buttongroup
    {
        height: var(--phi__window-controls-row-height);
    }

    @container style(--phi--is-hide-window-controls: 1)
    {
        .window-buttongroup
        {
            visibility: hidden;
        }
        .toolbar-mainbar[aria-label]
        {
            --phi__window-controls-row-height: 0 !important;
        }
    }

    #browser.mac.tabs-right:not(.native, .fullscreen)
    {
        &::after
        {
            content: '';
            display: block;
            position: absolute;
            top: 19px;
            left: 21px;
            width: 52px;
            height: 13px;
            background: white;
            border-radius: 6.5px;
            outline: 5px solid white;
        }

        &.isblurred::after
        {
            opacity: 0.1;
        }
    }

    #browser.mac.tabs-right .toolbar-mainbar[aria-label],
    #browser.native .toolbar-mainbar[aria-label]
    {
        padding-top: 5px !important;
    }

    @container style(--phi___is-compact-mode: 1)
    {
        #browser:not(.mac) .toolbar-mainbar[aria-label]
        {
            display: none;
        }

        #browser.mac
        {
            .toolbar-mainbar[aria-label]
            {
                .button-toolbar,
                .UrlBar-AddressField,
                .toolbar-extensions
                {
                    display: none;
                }
            }

            &.tabs-right .toolbar-mainbar[aria-label]
            {
                display: none;
            }
        }
    }

    @container not style(--phi--address-bar-focused-width-increase: 0)
    {
        .toolbar-mainbar[aria-label]
        {
            --phi__address-bar-expansion-width: calc(var(--phi--address-bar-focused-width-increase) * 1px);
            --phi__toolbar-width: calc((100% - var(--phi__address-bar-expansion-width)) / var(--phi--toolbar-column-count));
            --phi__toolbar-columns: repeat(var(--phi--toolbar-column-count), var(--phi__toolbar-width));
        }

        &:has(#urlFieldInput:focus)
        {
            .toolbar-mainbar[aria-label]
            {
                width: calc(100% + var(--phi__address-bar-expansion-width));
            }

            #browser.tabs-left .toolbar-mainbar[aria-label]
            {
                grid-template-columns: var(--phi__toolbar-columns) var(--phi__address-bar-expansion-width);
            }

            #browser.tabs-right
            {
                .toolbar-mainbar[aria-label]
                {
                    left: unset;
                    right: calc(100% - 10px);
                    grid-template-columns: var(--phi__address-bar-expansion-width) var(--phi__toolbar-columns);
                }

                &.native .toolbar-mainbar[aria-label] > *:first-child,
                &:not(.native) .toolbar-mainbar[aria-label] .window-buttongroup + *,
                .toolbar-mainbar[aria-label] .window-buttongroup
                {
                    grid-column-start: 2;
                }

                .toolbar-extensions
                {
                    grid-column: 2 / span var(--phi--toolbar-column-count);
                }
            }
        }
    }

    .UrlBar-AddressField,
    .toolbar-extensions,
    .UrlBar-PrivateWindowIndicator
    {
        grid-column: 1 / span var(--phi--toolbar-column-count);
    }

    .UrlBar-AddressField
    {
        grid-row-start: var(--phi__address-bar-row);
        z-index: 2;
        margin: 0;
        font-size: calc(13px - calc(var(--phi--address-bar-font-size-decrease) * 1px));
    }

    .UrlBar-AddressField:has(#urlFieldInput:focus)
    {
        grid-column: 1 / -1;
        height: 100% !important;
        font-size: unset;
    }

    @container style(--phi--is-address-bar-focused-height-increase: 1)
    {
        .UrlBar-AddressField:has(#urlFieldInput:focus)
        {
            grid-row-end: span 2;
        }
    }

    @container style(--phi--is-address-bar-unfocused-partial: 1)
    {
        .UrlFragment-LinkWrapper > .UrlFragment--Lowlight
        {
            display: none;
        }
    }

    @container style(--phi--is-address-bar-unfocused-hide-icons: 1)
    {
        &:not(:has(.ContentBlocker, #urlFieldInput:focus)) .ContentBlocker-Control
        {
            display: none;
        }
        &:not(:has(.button-popup:not(.ToolbarButtonPopup-DefaultStyles))) .UrlBar-AddressField:has(#urlFieldInput:not(:focus)) .toolbar-insideinput:last-child
        {
            & > *:not(.UrlBar-UrlObfuscationWarning, [class^="pageload"], .BookmarkButton--Active),
            &:has(.progressing) .UrlBar-UrlObfuscationWarning
            {
                display: none;
            }
        }
    }

    @container style(--phi--is-address-bar-focused-hide-icons: 1)
    {
        .UrlBar-AddressField:has(#urlFieldInput:focus) .toolbar-insideinput:last-child > *:not(.UrlBar-UrlObfuscationWarning)
        {
            display: none;
        }
        .UrlBar-AddressField:has(#urlFieldInput:focus) .UrlBar-UrlObfuscationWarning
        {
            margin-right: 5px;
        }
        .UrlBar-UrlField
        {
            margin-right: 2px;
        }
    }

    .pageload-ticker
    {
        padding: 0 4px 0 0 !important;
    }

    .OmniDropdown
    {
        top: 105%;
        padding-top: 0;
    }

    .toolbar-extensions
    {
        grid-row: var(--phi__extensions-row) / span 1;
        flex-wrap: wrap;
    }

    .toolbar-extensions:empty
    {
        display: block;
    }

    .toolbar-extensions:empty:after
    {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        content: '🧩 No extensions installed';
        opacity: 0.5;
        font-size: 0.75rem;
    }

    .toolbar-extensions button
    {
        min-width: unset !important;
        width: 30px;
        height: 30px !important;
    }

    [name="WorkspaceButton"]
    {
        margin: 0 5px 5px 5px !important;
    }

    @container style(--phi___is-compact-mode: 1)
    {
        [name="WorkspaceButton"]
        {
            margin-top: 5px !important;
        }

        [name="WorkspaceButton"] .button-title
        {
            display: none;
        }

        .toolbar-panel
        {
            .toolbar-divider,
            .toolbar-spacer
            {
                display: none;
            }
        }
    }

    @container style(--phi___is-panel-open: 1)
    {
        #panels-container
        {
            position: absolute !important;
            z-index: 4 !important;
        }

        #browser.mac.tabs-left #panels-container
        {
            padding-top: 50px;
        }

        #browser.mac.tabs-left .panel-group
        {
            padding-top: 40px;
        }

        .toolbar-panel::after
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: var(--backgroundBlur);
            z-index: -1;
        }

        .toolbar-panel
        {
            .toolbar-divider,
            .toolbar-spacer
            {
                display: none;
            }
        }
    }

    @container style(--phi___is-panel-open: 1) and style(--phi__is-auto-hide-visible: 1)
    {
        .panel-group
        {
            pointer-events: none;
        }
        .toolbar-panel
        {
            position: absolute;
        }
    }

    @container style(--phi___is-panel-closed: 1)
    {
        #panels-container
        {
            display: contents;
        }

        .toolbar-panel
        {
            margin: 0;
            flex-direction: row !important;
            flex-wrap: wrap;
        }

        .toolbar-panel::before
        {
            content: '';
            width: 100%;
            border: 1px solid var(--colorAccentFg);
            opacity: 0.15;
            margin: 5px;
        }
    }

    @container style(--phi___is-compact-mode: 1) and style(--phi___is-panel-closed: 1)
    {
        .toolbar-panel
        {
            justify-content: center;
        }
    }

    .tab-strip
    {
        overflow: hidden auto;
        display: grid;
        grid-template-columns: repeat(var(--phi--pinned-column-count), minmax(0, 1fr));
        grid-auto-rows: min-content;
        gap: 5px;
        justify-content: center;
    }

    .tab-wrapper,
    .tab-strip .separator,
    .newtab
    {
        grid-column: 1 / span var(--phi--pinned-column-count);
    }

    .tab-wrapper,
    .tab-strip .separator
    {
        position: relative;
        transform: none;
    }

    .tab-wrapper
    {
        margin: 0;
        padding: 0;
        max-height: unset;
    }

    .tab-strip .separator
    {
        align-items: center;
    }

    .tab-strip .separator hr
    {
        margin: 0;
        width: 100%;
    }

    .tab-group-indicator
    {
        position: relative;
        top: unset !important;
        padding: 0;
    }

    @container style(--phi___is-compact-mode: 1)
    {
        .tab-group-indicator
        {
            display: none;
        }
    }

    .svg-tab-selection
    {
        height: 100%;
        max-height: unset !important;
    }

    .tab .title
    {
        padding-left: 10px !important;
    }

    @container style(--phi___is-compact-mode: 1)
    {
        .tab .favicon
        {
            margin: 0;
            display: flex;
        }

        .tab .title,
        .tab .close
        {
            display: none;
        }
    }

    .tab-indicator
    {
        border: 0;
        margin: 0 !important;
    }

    .tab-indicator:first-child
    {
        border-top-left-radius: var(--currentRadius);
    }

    .tab-indicator:last-child
    {
        border-top-right-radius: var(--currentRadius);
    }

    @container style(--phi___is-compact-mode: 1)
    {
        .tab-header
        {
            padding-left: 0;
            justify-content: center;
        }
    }

    @container not style(--phi___is-compact-mode: 1)
    {
        .is-pinned
        {
            .tab-wrapper
            {
                align-self: end;
                grid-column: span 1;
                aspect-ratio: 1;
                background-color: var(--colorAccentBgAlphaHeavy);
            }

            .group
            {
                display: grid;
            }

            .tab,
            .tab-group-indicator
            {
                grid-column: 1 / -1;
            }

            .tab
            {
                max-height: unset;
                height: 100%;
                grid-row: 1 / 3;
                align-items: center;
            }

            .tab-group-indicator
            {
                grid-row: 1 / 2;
                column-gap: 2px;
            }

            .tab-header
            {
                flex: 1 !important;
                padding: 0;
                width: 100%;
                justify-content: center;
            }

            .button-badge
            {
                top: unset !important;
                right: 2px !important;
                bottom: 2px !important;
                left: unset !important;
            }

            .tab-indicator:not(.active):not(:hover)
            {
                background-color: var(--colorHighlightFgAlpha) !important;
            }

            .tab-indicator.active
            {
                background-color: transparent !important;
            }
        }
    }

    .tab-position:not(.is-pinned)
    {
        .group
        {
            margin-top: 0 !important;
            border: 1px solid transparent;
            height: 31px;
        }

        .group:hover
        {
            border-color: var(--colorAccentBgAlpha);
        }

        .group:has(.tab.active)
        {
            border-color: var(--colorBg);
        }

        .tab-group,
        .tab-indicator
        {
            height: 30px !important;
        }

        .tab-group
        {
            flex: 0 0 28px;
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        @container style(--phi___is-compact-mode: 1)
        {
            .tab-group
            {
                flex: 1;
            }
        }

        .tab-indicator:first-child
        {
            border-top-left-radius: 0;
        }

        .tab-indicator:last-child
        {
            border-top-right-radius: var(--currentRadius);
            border-bottom-right-radius: var(--currentRadius);
        }

        .tab-indicator:not(:last-child)
        {
            border-right: 1px solid var(--colorAccentBgAlpha);
        }

        .group:has(.tab.active) .tab-indicator:not(:last-child)
        {
            border-right: 1px solid var(--colorBg);
        }

        .tab-group.active:has(.close):hover
        {
            .tab-header
            {
                padding-left: 0;
                justify-content: center;
            }

            @container not style(--phi___is-compact-mode: 1)
            {
                .favicon
                {
                    display: none;
                }
            }

            .close
            {
                margin: 0 !important;
            }
        }

        .tab-indicator::before
        {
            content: attr(title);
            font-size: 12px;
            color: var(--colorAccentFg);
            padding-left: 5px;
            position: absolute;
            width: calc(100% - 6px);
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .tab-wrapper:not(.active) .tab-indicator:hover,
        .tab-indicator:not(.active):hover,
        .group:has(.tab-group:hover) .tab-indicator.active
        {
            background-color: var(--colorAccentBgAlpha) !important;
        }
    }

    #browser:not(.ui-transparent-tabs) .tab-position:not(.is-pinned)
    {
        .group:not(.active, :hover) .tab-indicator:not(:hover),
        .tab-indicator:not(.active):not(:hover)
        {
            background-color: var(--colorAccentBgAlphaHeavy) !important;
        }
    }

    #browser.ui-transparent-tabs .tab-position:not(.is-pinned)
    {
        .group:not(.active, :hover) .tab-indicator:not(:hover),
        .tab-indicator:not(.active):not(:hover)
        {
            background-color: transparent !important;
        }
    }

    .tab-position:not(.is-pinned) .tab-indicator.active::before,
    #browser.isblurred .tab-position:not(.is-pinned) .tab-indicator::before
    {
        color: var(--colorFg);
    }

    .toolbar-tabbar-after
    {
        all: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: max(var(--densityGap), 1px);
    }

    @container style(--phi___is-compact-mode: 1)
    {
        .toolbar-tabbar-after
        {
            flex-direction: column;
        }
    }

    .toolbar-tabbar-after .toolbar-spacer-flexible
    {
        display: none;
    }

    .toolbar-tabbar-after .button-toolbar
    {
        width: auto;
    }

    .newtab
    {
        top: 0 !important;
        left: 0 !important;
    }

    @container style(--phi___is-compact-mode: 1)
    {
        .sync-and-trash-container
        {
            display: none;
        }
    }

    #webview-container
    {
        --colorBgDarker: transparent;
        --colorBorder: transparent;
        --colorBorderIntense: transparent;
    }

    #webpage-stack > .tiled
    {
        padding: 5px !important;
    }

    .tiled
    {
        gap: 6px;
    }

    .tiled .tile
    {
        border: 0 !important;
    }

    @container not style(--phi--webview-border: 0)
    {
        #webview-container,
        #webpage-stack > .tiled
        {
            --phi__border: calc(var(--phi--webview-border) * 1px);
            --phi__border-left-minus: 0px;
            --phi__border-right-minus: 0px;
            --phi__border-vertical-minus: 0px;
            border-style: solid;
            border-color: transparent;
        }

        &:not(:has(.tiled.active)) #webview-container,
        &:has(.tiled.active) #webpage-stack > .tiled
        {
            border-top-width: calc(var(--phi__border) - var(--phi__border-vertical-minus));
            border-bottom-width: calc(var(--phi__border) - var(--phi__border-vertical-minus));
            border-left-width: calc(var(--phi__border) - var(--phi__border-left-minus));
            border-right-width: calc(var(--phi__border) - var(--phi__border-right-minus));
        }
    }

    @container (not style(--phi--webview-border: 0)) and ((not style(--phi__is-auto-hide: 1)) or style(--phi__is-auto-hide-visible: 1))
    {
        &:not(:has(.tiled.active))
        {

            #browser.tabs-left #webview-container
            {
                --phi__border-left-minus: 5px;
            }

            #browser.tabs-right #webview-container
            {
                --phi__border-right-minus: 5px;
            }
        }

        #webpage-stack > .tiled
        {
            --phi__border-vertical-minus: 5px;
        }

        #browser.tabs-left #webpage-stack > .tiled
        {
            --phi__border-left-minus: 10px;
            --phi__border-right-minus: 5px;
        }

        #browser.tabs-right #webpage-stack > .tiled
        {
            --phi__border-left-minus: 5px;
            --phi__border-right-minus: 10px;
        }
    }

    @container (not style(--phi--webview-border: 0)) and style(--phi__is-auto-hide: 1)
    {
        #webpage-stack > .tiled
        {
            --phi__border-vertical-minus: 5px;
            --phi__border-left-minus: 5px;
            --phi__border-right-minus: 5px;
        }
    }

    @container not style(--phi--webview-border-radius: 0)
    {
        #webpage-stack,
        .tiled.webpageview
        {
            border-radius: calc(var(--phi--webview-border-radius) * 1px) !important;
        }
    }

    @container not style(--phi--webview-shadow-size: 0)
    {
        #webpage-stack:not(:has(.tiled.active)),
        .tiled.webpageview:not(.active)
        {
            box-shadow: 0 0 calc(var(--phi--webview-shadow-size) * 1px) rgba(var(--phi--webview-shadow-color));
        }
    }

    @container style(--phi--is-individual-tiled-tab-header: 1)
    {
        .tiled .webpage webview[src]
        {
            display: flex;
            flex-direction: column;
            align-items: center;

            &::before
            {
                content: '🔗 ' attr(src);
                padding: 0.25rem 0;
                width: 80%;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .button-toolbar:has(> [data-name="UpdateButton"]) {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        border: calc(var(--phi--webview-border) * 1px) solid var(--colorWindowBg);
        box-shadow: none;
    }
}