/* Get the same gradient depending on tabs side */
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
  :root {
    --gradient-start: circle at 95% top;
  }
}
@media not (-moz-bool-pref: "zen.tabs.vertical.right-side") {
  :root {
    --gradient-start: circle at 5% top;
  }
}

/* Control saturation of colors */
@media (-moz-bool-pref: "uc.supergradient.desaturate") {
  :root {
    --saturation: 55%;
  }
}
@media not (-moz-bool-pref: "uc.supergradient.desaturate") {
  :root {
    --saturation: 80%;
  }
}

/* Control lightness of colors/intensity of the gradient */
@media (prefers-color-scheme: dark) {
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallySubtle"]) {
    --lightness: 7%;
    --accent-color-lightness: 36%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherSubtle"]) {
    --lightness: 9%;
    --accent-color-lightness: 38%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="Normal"]) {
    --lightness: 12%;
    --accent-color-lightness: 40%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherIntense"]) {
    --lightness: 14%;
    --accent-color-lightness: 44%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallyIntense"]) {
    --lightness: 16%;
    --accent-color-lightness: 48%;
  }
} 
@media (prefers-color-scheme: light) {
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallySubtle"]) {
    --lightness: 90%;
    --accent-color-lightness: 66%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherSubtle"]) {
    --lightness: 85%;
    --accent-color-lightness: 62%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="Normal"]) {
    --lightness: 80%;
    --accent-color-lightness: 58%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherIntense"]) {
    --lightness: 75%;
    --accent-color-lightness: 54%;
  }
  :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallyIntense"]) {
    --lightness: 70%;
    --accent-color-lightness: 50%;
  }
}

/* SuperGradient Presets */

/* 1. Top-left; 2. Bottom-left; 3. Top-right'ish 4. Bottom-right*/

:root:has(#theme-SuperGradient[theme-supergradient-preset="NorthernHorizen"]) {
  --gradient-color1: hsl(220, var(--saturation), var(--lightness));
  --gradient-color2: hsl(160, var(--saturation), var(--lightness));
  --gradient-color3: hsl(200, var(--saturation), var(--lightness));
  --gradient-color4: hsl(180, var(--saturation), var(--lightness));
  --switched-color1: hsl(160, var(--saturation), var(--lightness));
  --switched-color2: hsl(220, var(--saturation), var(--lightness));
  --switched-color3: hsl(180, var(--saturation), var(--lightness));
  --switched-color4: hsl(200, var(--saturation), var(--lightness));
  --custom-accent-color: hsla(205, 50%, var(--accent-color-lightness), 0.7);
  --switched-accent-color: hsla(170, 50%, var(--accent-color-lightness), 0.7);
}

:root:has(#theme-SuperGradient[theme-supergradient-preset="ScarletDusk"])  {
  --gradient-color1: hsl(340, var(--saturation), var(--lightness));
  --gradient-color2: hsl(40, var(--saturation), var(--lightness));
  --gradient-color3: hsl(30, var(--saturation), var(--lightness));
  --gradient-color4: hsl(340, var(--saturation), var(--lightness));
  --switched-color1: hsl(40, var(--saturation), var(--lightness));
  --switched-color2: hsl(340, var(--saturation), var(--lightness));
  --switched-color3: hsl(340, var(--saturation), var(--lightness));
  --switched-color4: hsl(30, var(--saturation), var(--lightness));
  --custom-accent-color: hsla(350, 50%, var(--accent-color-lightness), 0.6);
  --switched-accent-color: hsla(40, 50%, var(--accent-color-lightness), 0.6);
}

:root:has(#theme-SuperGradient[theme-supergradient-preset="AmethystClaret"])  {
  --gradient-color1: hsl(270, var(--saturation), var(--lightness));
  --gradient-color2: hsl(0, var(--saturation), var(--lightness));
  --gradient-color3: hsl(320, var(--saturation), var(--lightness));
  --gradient-color4: hsl(20, var(--saturation), var(--lightness));
  --switched-color1: hsl(0, var(--saturation), var(--lightness));
  --switched-color2: hsl(270, var(--saturation), var(--lightness));
  --switched-color3: hsl(20, var(--saturation), var(--lightness));
  --switched-color4: hsl(320, var(--saturation), var(--lightness));
  --custom-accent-color: hsla(280, 50%, var(--accent-color-lightness), 0.5);
  --switched-accent-color: hsla(350, 50%, var(--accent-color-lightness), 0.5);
}

:root:has(#theme-SuperGradient[theme-supergradient-preset="OliveSunset"])  {
  --gradient-color1: hsl(20, var(--saturation), var(--lightness));
  --gradient-color2: hsl(65, var(--saturation), var(--lightness));
  --gradient-color3: hsl(50, var(--saturation), var(--lightness));
  --gradient-color4: hsl(160, var(--saturation), var(--lightness));
  --switched-color1: hsl(65, var(--saturation), var(--lightness));
  --switched-color2: hsl(20, var(--saturation), var(--lightness));
  --switched-color3: hsl(160, var(--saturation), var(--lightness));
  --switched-color4: hsl(50, var(--saturation), var(--lightness));
  --custom-accent-color: hsla(40, 50%, var(--accent-color-lightness), 0.5);
  --switched-accent-color: hsla(60, 50%, var(--accent-color-lightness), 0.5);
}

:root:has(#theme-SuperGradient[theme-supergradient-preset="MidnightMajesty"])  {
  --gradient-color1: hsl(50, var(--saturation), var(--lightness));
  --gradient-color2: hsl(300, var(--saturation), var(--lightness));
  --gradient-color3: hsl(60, var(--saturation), var(--lightness));
  --gradient-color4: hsl(10, var(--saturation), var(--lightness));
  --switched-color1: hsl(300, var(--saturation), var(--lightness));
  --switched-color2: hsl(50, var(--saturation), var(--lightness));
  --switched-color3: hsl(10, var(--saturation), var(--lightness));
  --switched-color4: hsl(60, var(--saturation), var(--lightness));
  --custom-accent-color: hsla(50, 50%, var(--accent-color-lightness), 0.5);
  --switched-accent-color: hsla(310, 50%, var(--accent-color-lightness), 0.4);
}

:root:has(#theme-SuperGradient[theme-supergradient-preset="GalaxyDream"]) {
  --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
  --zen-main-browser-background: radial-gradient(ellipse, var(--zen-browser-gradient-base, #1B1E27) 20%, light-dark(#ffffff, #1b1b1b) 100%) !important;
  
  /* Makes the gradient work in compact mode */
  @media (-moz-bool-pref:"zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.compact") {
    #nav-bar::before, #nav-bar { /* Attribute "data-l10n-id" makes the gradient work with floating toolbar mod bookmarks toolbar */
      background: radial-gradient(ellipse at bottom, var(--zen-browser-gradient-base, #1B1E27) 2%, light-dark(#ffffff, #1b1b1b) 100%) !important;
    }
    #PersonalToolbar[data-l10n-id="bookmarks-toolbar"] {
      background: radial-gradient(ellipse at top, var(--zen-browser-gradient-base, #1B1E27) 2%, light-dark(#ffffff, #1b1b1b) 100%) !important;
    }
  }    
  @media (-moz-bool-pref:"zen.view.compact.hide-tabbar") and (-moz-bool-pref: "zen.view.compact") {
    #navigator-toolbox {
      --zen-themed-toolbar-bg: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 1%, light-dark(#ffffff, #1b1b1b) 95%) !important;
    }
  }

  /* Make gradient work when "Expand on hover" is enabled */
  @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
    #navigator-toolbox[zen-has-hover],
    #navigator-toolbox:focus-within,
    #navigator-toolbox[movingtab],
    #navigator-toolbox[flash-popup],
    #navigator-toolbox[has-popup-menu],
    #navigator-toolbox:has(.tabbrowser-tab:active),
    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
      #TabsToolbar {
        background: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 1%, light-dark(#ffffff, #1b1b1b) 95%) !important;
      }
    }
  }
}

:root:has(#theme-SuperGradient[theme-supergradient-preset="CustomGradient"]) {
  --gradient-color1: var(--uc-supergradient-custom-colors-1);
  --gradient-color2: var(--uc-supergradient-custom-colors-2);
  --gradient-color3: var(--uc-supergradient-custom-colors-3);
  --gradient-color4: var(--uc-supergradient-custom-colors-4);
  --switched-color1: var(--uc-supergradient-custom-colors-2);
  --switched-color2: var(--uc-supergradient-custom-colors-1);
  --switched-color3: var(--uc-supergradient-custom-colors-4);
  --switched-color4: var(--uc-supergradient-custom-colors-3);
  --custom-accent-color: light-dark(color-mix(in srgb, var(--uc-supergradient-custom-colors-1) 85%, black 15%), color-mix(in srgb, var(--uc-supergradient-custom-colors-1) 85%, white 15%));
  --switched-accent-color: light-dark(color-mix(in srgb, var(--uc-supergradient-custom-colors-2) 85%, black 15%), color-mix(in srgb, var(--uc-supergradient-custom-colors-2) 85%, white 15%));
}

/* Switch the colors in the gradient (when toggled) */
@media (-moz-bool-pref: "uc.supergradient.switch-colors") {
  :root {
    --gradient-color1: var(--switched-color1) !important;
    --gradient-color2: var(--switched-color2) !important;
    --gradient-color3: var(--switched-color3) !important;
    --gradient-color4: var(--switched-color4) !important; 
    --custom-accent-color: var(--switched-accent-color) !important;
  }
}

/* Applies the color gradient based on the set user preferences */
:root:has(#theme-SuperGradient[theme-supergradient-preset="NorthernHorizen"],
          #theme-SuperGradient[theme-supergradient-preset="ScarletDusk"],
          #theme-SuperGradient[theme-supergradient-preset="AmethystClaret"],
          #theme-SuperGradient[theme-supergradient-preset="OliveSunset"],
          #theme-SuperGradient[theme-supergradient-preset="MidnightMajesty"],
          #theme-SuperGradient[theme-supergradient-preset="CustomGradient"]) {
  --zen-main-browser-background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important;
}
    
/* Makes the gradient work in compact mode */
@media (-moz-bool-pref:"zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.compact") {
  #nav-bar::before, #nav-bar, #PersonalToolbar[data-l10n-id="bookmarks-toolbar"] { /* Attribute "data-l10n-id" makes the gradient work with floating toolbar mod bookmarks toolbar */
    background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important;
  }
}    
@media (-moz-bool-pref:"zen.view.compact.hide-tabbar") and (-moz-bool-pref: "zen.view.compact") {
  #navigator-toolbox {
    --zen-themed-toolbar-bg: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important;
  }
}

/* Make gradient work when "Expand on hover" is enabled */
@media (-moz-bool-pref: "zen.view.sidebar-expanded") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
  #navigator-toolbox[zen-has-hover],
  #navigator-toolbox:focus-within,
  #navigator-toolbox[movingtab],
  #navigator-toolbox[flash-popup],
  #navigator-toolbox[has-popup-menu],
  #navigator-toolbox:has(.tabbrowser-tab:active),
  #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
    #TabsToolbar {
      background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important;
    }
  }
}

/* Use custom accent colors adjusted to the gradient (unless toggled, which uses zen's accent color) */
@media not (-moz-bool-pref: "uc.supergradient.use-accent-color") {
  :root:has(#theme-SuperGradient[theme-supergradient-preset="NorthernHorizen"],
            #theme-SuperGradient[theme-supergradient-preset="ScarletDusk"],
            #theme-SuperGradient[theme-supergradient-preset="AmethystClaret"],
            #theme-SuperGradient[theme-supergradient-preset="OliveSunset"],
            #theme-SuperGradient[theme-supergradient-preset="MidnightMajesty"],
            #theme-SuperGradient[theme-supergradient-preset="CustomGradient"]) {

    --toolbarbutton-hover-background: color-mix(in srgb, var(--custom-accent-color) 60%, transparent) !important;
    --toolbarbutton-active-background: color-mix(in srgb, var(--custom-accent-color) 80%, transparent) !important;
    --panel-item-hover-bgcolor: color-mix(in srgb, var(--custom-accent-color) 60%, transparent) !important;
    --zen-workspaces-strip-background-color: var(--custom-accent-color) !important;
       
    @media (-moz-bool-pref: "zen.workspaces.show-icon-strip") {      
      #zen-workspaces-button {
        background: color-mix(in srgb, var(--custom-accent-color) 25%, transparent) !important;
      }
    }
    
    /* background color of pinned tabs in a normal state (not hovered/selected) */
    .tabbrowser-tab[pinned] .tab-stack .tab-background {
      background-color: color-mix(in srgb, var(--custom-accent-color) 35%, transparent 75%) !important;
    }
    /* background color when hovering */
    .tabbrowser-tab:hover .tab-stack .tab-background {
      background-color: color-mix(in srgb, var(--custom-accent-color) 50%, transparent 75%) !important;
    }
    /* background color when selected */
    .tabbrowser-tab[selected="true"] .tab-stack .tab-background,
    .tabbrowser-tab[multiselected="true"] .tab-stack .tab-background {
      background-color: var(--custom-accent-color) !important;
    }
    /* background color when hovering and selected */
    .tabbrowser-tab[selected="true"]:hover .tab-stack .tab-background,
    .tabbrowser-tab[multiselected="true"]:hover .tab-stack .tab-background {
      background-color: color-mix(in srgb, var(--custom-accent-color) 90%, transparent) !important;
    }
  }
}

/* This creates the Film Grain Effect */
@media (not (-moz-bool-pref: "zen.view.compact")) or (-moz-bool-pref: "zen.view.compact.hide-tabbar") or 
  	        ((-moz-bool-pref: "zen.view.compact") and (-moz-bool-pref: "zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {
  
  @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
    #navigator-toolbox[zen-has-hover],
    #navigator-toolbox:focus-within,
    #navigator-toolbox[movingtab],
    #navigator-toolbox[flash-popup],
    #navigator-toolbox[has-popup-menu],
    #navigator-toolbox:has(.tabbrowser-tab:active),
    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
      #TabsToolbar::after {
        content: "";
        position: absolute;

        width: 100%;
        height: 100%;

        top: 0px;
        left: 0px;

        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: -2;
      }
    }
  }
  
  @media (prefers-color-scheme: dark) {
    /* Textures: 3%, 5% and 8% Opacity and white on black */
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) {
      #browser, #TabsToolbar::after {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-subtle.png") !important;
      }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) {
      #browser, #TabsToolbar::after {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-normal.png") !important;
      }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) {
      #browser, #TabsToolbar::after {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-intense.png") !important;
      }
    }
  }
  @media (prefers-color-scheme: light) {
    /* 3%, 6% and 9% Opacity and black on white*/
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) {
      #browser, #TabsToolbar::after {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important;
      }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) {
      #browser, #TabsToolbar::after {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-normal.png") !important;
      }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) {
      #browser, #TabsToolbar::after {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-intense.png") !important;
      }
    }
  }
}

/* Makes the Film Grain Effect work in compact mode as well */
@media (-moz-bool-pref: "zen.view.compact") {
  
  @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
    #navigator-toolbox[zen-has-hover],
    #navigator-toolbox:focus-within,
    #navigator-toolbox[movingtab],
    #navigator-toolbox[flash-popup],
    #navigator-toolbox[has-popup-menu],
    #navigator-toolbox:has(.tabbrowser-tab:active),
    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
      #TabsToolbar::after {
        content: "";
        position: absolute;

        width: 100%;
        height: 100%;

        top: 0px;
        left: 0px;

        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: -2;
      }
    }
  }

  @media not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
    #TabsToolbar::after {
      content: "";
      position: absolute;

      width: 100%;
      height: 100%;

      top: 0px;
      left: 0px;

      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      z-index: -2;
    }
  }
  
  @media (-moz-bool-pref: "zen.view.compact") and (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
    toolbarbutton {
      z-index: 2 !important;
    }  

    #nav-bar::before {
      content: "";
      position: absolute;

      width: 100%;
      height: 100%;

      top: 0px;
      left: 0px;

      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      z-index: 0;
    }
  }
  
  @media (prefers-color-scheme: dark) {
    /* Textures: 3%, 5% and 8% Opacity and white on black */
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) {
      #TabsToolbar::after, #nav-bar::before {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-subtle.png") !important;
      }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) {
      #TabsToolbar::after, #nav-bar::before {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-normal.png") !important;
      }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) {
       #TabsToolbar::after, #nav-bar::before {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-intense.png") !important;
      }
    }
  }
  @media (prefers-color-scheme: light) {
    /* 3%, 6% and 9% Opacity and black on white*/
     :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) {
      #TabsToolbar::after, #nav-bar::before {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important;
       }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) {
      #TabsToolbar::after, #nav-bar::before {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important;
      }
    }
    :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) {
      #TabsToolbar::after, #nav-bar::before {
        background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important;
      }
    }
  }
}

/* This fixes the corners of the browser content */
browser {
	border-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important;
}
@media (-moz-bool-pref: "zen.view.compact") and (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
  #nav-bar {
    border-bottom-left-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important;
    border-bottom-right-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important;
  }
}