/**
* This Zen theme adds additional styling to the private browsing mode window such as a gradient on the toolbar,
* a border around the browser page, and an icon in the URL bar. These are configurable in the Zen Mods settings.
*
* The --pbmh prefix stands for Private Browsing Mode Highlighting.
*/

/*******************************************\
* Base variables.
\*******************************************/

:root {
    --pbmh-private-browsing-mode-base-color: #32064e;
    --pbmh-private-browsing-mode-gradient-stop-color: rgb(from var(--pbmh-private-browsing-mode-color) r g b / 0%);
    --pbmg-private-browsing-mode-gradient-stop-position: var(--zen-toolbar-height, 34px);
    --pbmg-private-browsing-mode-border-size: 2px;
}


/*******************************************\
* Topbar highlighting.
\*******************************************/

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="match-zen"]) {
    --pbmh-private-browsing-mode-base-color: var(--zen-primary-color);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="blue"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #aac7ff calc(l - 0.5) c h);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="teal"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #74d7cb calc(l - 0.5) c h);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="green"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #a0d490 calc(l - 0.5) c h);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="yellow"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #dec663 calc(l - 0.5) c h);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="orange"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #ffb787 calc(l - 0.5) c h);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="brown"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #dec1b1 calc(l - 0.5) c h);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="red"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #ffb1c0 calc(l - 0.5) c h);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="pink"]) {
    --pbmh-private-browsing-mode-base-color: oklch(from #f6b0ea calc(l - 0.5) c h);
}

:root {
    --pbmh-private-browsing-mode-color: var(--pbmh-private-browsing-mode-base-color);
    --pbmh-private-browsing-mode-border: oklch(from var(--pbmh-private-browsing-mode-color) calc(l + 0.2) c h);

    &:where([lwt-toolbar="light"]) {
        --pbmh-private-browsing-mode-color: oklch(from var(--pbmh-private-browsing-mode-base-color) calc(l + 0.45) calc(c + 0.05) h);
        --pbmh-private-browsing-mode-border: oklch(from var(--pbmh-private-browsing-mode-color) calc(l - 0.2) c h);
    }
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-highlighting-style="solid"]) {
    --pbmh-private-browsing-mode-gradient-stop-color: var(--pbmh-private-browsing-mode-color);
}

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-highlighting-style]:not([uc-private-browsing-top-bar-highlighting-style="none"])) {
    &[privatebrowsingmode] #zen-appcontent-navbar-container,
    &[privatebrowsingmode][zen-compact-mode="true"]:not([zen-single-toolbar="true"]) #nav-bar {
        background-image: linear-gradient(to bottom,
                var(--pbmh-private-browsing-mode-color),
                var(--pbmh-private-browsing-mode-gradient-stop-color) var(--pbmg-private-browsing-mode-gradient-stop-position),
                transparent calc(var(--pbmg-private-browsing-mode-gradient-stop-position) + 1px)) !important;
    }

    &[privatebrowsingmode][zen-single-toolbar="true"] #urlbar-background {
        background-color: var(--pbmh-private-browsing-mode-color) !important;
    }
}

/*******************************************\
* Viewport border styling.
\*******************************************/

:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-border-style="thin"]) {
    --pbmg-private-browsing-mode-border-size: 1px;
}

:root[privatebrowsingmode]:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]):has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-border-style]:not([uc-private-browsing-top-bar-border-style="none"])) {
    & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
        box-shadow: 0 0 0 var(--pbmg-private-browsing-mode-border-size) var(--pbmh-private-browsing-mode-border) !important;
    }
}

/*******************************************\
* Private Browsing Mode Icon styling.
\*******************************************/

@media not (-moz-bool-pref: "uc.private-browsing-top-bar.hide-icon") {
    [privatebrowsingmode] .zen-current-workspace-indicator-icon {
        display: block !important;
        color: transparent !important;
        aspect-ratio: 1;
        border-radius: 100%;
        background-color: oklch(from var(--pbmh-private-browsing-mode-base-color) calc(l + 0.05) calc(c + 0.2) h);
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48c3R5bGU+KntmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjEuOTJweDt9PC9zdHlsZT48L2RlZnM+PHBvbHlsaW5lIHBvaW50cz0iMC41IDExLjA0IDEyIDExLjA0IDIzLjUgMTEuMDQiLz48cGF0aCBkPSJNMTkuNjcsMTFINC4zM0w1LDQuNjhBMi41NCwyLjU0LDAsMCwxLDcuNTcsMi40MmgwYTIuNDcsMi40NywwLDAsMSwxLjEzLjI3aDBhNy40Myw3LjQzLDAsMCwwLDYuNiwwaDBhMi40NywyLjQ3LDAsMCwxLDEuMTMtLjI3aDBBMi41NCwyLjU0LDAsMCwxLDE5LDQuNjhaIi8+PGNpcmNsZSBjeD0iNi43MyIgY3k9IjE4LjIzIiByPSIzLjM1Ii8+PGNpcmNsZSBjeD0iMTcuMjciIGN5PSIxOC4yMyIgcj0iMy4zNSIvPjxwYXRoIGQ9Ik0xMC4wOCwxOC43MWExLjkyLDEuOTIsMCwxLDEsMy44NCwwIi8+PGxpbmUgeDE9IjEuNDYiIHkxPSIxNS44MyIgeDI9IjQuMzMiIHkyPSIxNS44MyIvPjxsaW5lIHgxPSIxOS42NyIgeTE9IjE1LjgzIiB4Mj0iMjIuNTQiIHkyPSIxNS44MyIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 65%;
        pointer-events: none;
    }
}
