/**
 * 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 Zen's Look and Feel settings.
 *
 * The --pbmh prefix stands for Private Browsing Mode Highlighting.
 */

:root {
  --pbmh-private-browsing-mode-color: #25003E;
  --pbmh-private-browsing-mode-border: hsl(from var(--pbmh-private-browsing-mode-color) h s calc(l + 20));
}

[devtoolstheme=light] {
  --pbmh-private-browsing-mode-color: #C080EB;
  --pbmh-private-browsing-mode-border: hsl(from var(--pbmh-private-browsing-mode-color) h s calc(l - 20));
}

@media not (-moz-bool-pref: "uc.private-browsing-top-bar.no-bg") {
  [privatebrowsingmode] #nav-bar {
    background-image: linear-gradient(to bottom, var(--pbmh-private-browsing-mode-color), rgb(from var(--pbmh-private-browsing-mode-color) r g b / 0%) 98%) !important;
  }

  @media (-moz-bool-pref: "uc.private-browsing-top-bar.solid-bg") {
    [privatebrowsingmode] #nav-bar {
      background-image: none !important;
      background-color: var(--pbmh-private-browsing-mode-color) !important;
    }
  }
}

@media not (-moz-bool-pref: "uc.private-browsing-top-bar.no-border") {
  :root[privatebrowsingmode]:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) {
    & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
      box-shadow: 0 0 0 2px var(--pbmh-private-browsing-mode-border) !important;
    }
  }
}

@media not (-moz-bool-pref: "uc.private-browsing-top-bar.hide-icon") {
  [privatebrowsingmode] #stop-reload-button {
    position: relative;
  }

  [privatebrowsingmode] #stop-reload-button::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%;
    pointer-events: none;
  }

  /*
   * Prevents the spring from collapsing too far and causing the URL bar to overlap the icon 
   */
  [privatebrowsingmode] toolbarspring:has(+ #urlbar-container) {
    min-width: 40px !important;
  }

  /* 
   *If the spring has been remvoed (e.g., the browser width is too small), 
   *then add a margin to the URL bar to prevent it from overlapping the icon
   */
  [privatebrowsingmode] #stop-reload-button+#urlbar-container {
    margin-inline-start: 40px !important;
  }
}