zen-themes.css

/* Zen Mods - Generated by ZenMods.
* FILE GENERATED AT: Thursday, February 19, 2026 at 1:48:18 PM Eastern European Standard Time
* DO NOT EDIT THIS FILE DIRECTLY!
* Your changes will be overwritten.
* Instead, go to the preferences and edit the mods there.
*/

/* Name: Transparent Zen */
/* Description: Make the Zen Browser's tab background transparent, get smooth animations and more. Enable  features in mod settings and visit the homepage below to learn more about the features. 👇 */
/* Author: @sameerasw */
/* variables */
:root {
  @media -moz-pref( "mod.sameerasw.zen_bg_color_enabled") {
    --zen-main-browser-background: var(
      --mod-sameerasw-zen_transparency_color,
      #00000000
    ) !important;
  }
}

/* animation smoothness */
:root:has([mod-sameerasw_zen_animations="0"]) {
  --mod-sameerasw-zen-animation-smoothness: all 0.15s
      cubic-bezier(0.175, 0.885, 0.3, 1.3),
    filter 0.15s ease-in-out, opacity 0.2s ease-in-out !important;
}

:root:has([mod-sameerasw_zen_animations="1"]) {
  --mod-sameerasw-zen-animation-smoothness: all 0.25s
      cubic-bezier(0.175, 0.885, 0.32, 1.35),
    filter 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
}

:root:has([mod-sameerasw_zen_animations="2"]) {
  --mod-sameerasw-zen-animation-smoothness: all 0.4s
      cubic-bezier(0.175, 0.885, 0.32, 1.55),
    filter 0.4s ease-in-out, opacity 0.45s ease-in-out !important;
}

:root:has([mod-sameerasw_zen_animations="3"]) {
  --mod-sameerasw-zen-animation-smoothness: all 0.25s
      cubic-bezier(0.575, 0.685, 0.52, 1.55),
    filter 0.3s ease-in-out, opacity 0.35s ease-in-out !important;
}
/* default */
:root:not(:has([mod-sameerasw_zen_animations])) {
  --mod-sameerasw-zen-animation-smoothness: all 0.25s
      cubic-bezier(0.175, 0.885, 0.32, 1.35),
    filter 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
}

/* tab tint */
:root:has([mod-sameerasw_zen_light_tint="1"]) {
  .browserStack {
    & > browser {
      background-color: light-dark(
        rgba(255, 255, 255, 0.1),
        rgba(0, 0, 0, 0.1)
      ) !important;
    }
  }
}

:root:has([mod-sameerasw_zen_light_tint="2"]) {
  .browserStack {
    & > browser {
      background-color: transparent !important;
    }
  }
}

/* hide shadows */
hbox.browserSidebarContainer,
#zen-tabbox-wrapper {
  @media -moz-pref( "mod.sameerasw.zen_no_shadow") {
    box-shadow: none !important;
  }
}

/* Animations */
/* Tab switch animation */
#tabbrowser-tabpanels
  > hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) {
  @media -moz-pref( "mod.sameerasw.zen_tab_switch_anim") {
    transition: var(--mod-sameerasw-zen-animation-smoothness) !important;
    scale: 0.9 !important;
    opacity: 0;
  }
}
#tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]) {
  @media -moz-pref( "mod.sameerasw.zen_tab_switch_anim") {
    scale: 1 !important;
    opacity: 1 !important;
  }
}

/* website switch animations */
#browser:not(:has(.zen-glance-background)) #tabbrowser-tabpanels {
  @media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
    transition: var(--mod-sameerasw-zen-animation-smoothness) !important;
  }
}

/* URL bar zoom animation */
#browser:has(#urlbar[open][zen-floating-urlbar="true"]) #tabbrowser-tabpanels {
  @media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
    pointer-events: none;
    scale: 1.1 !important;
    filter: blur(10px) brightness(70%) !important;
  }
}

#urlbar[open][zen-floating-urlbar="true"] .urlbar-background {
  @media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
  background-color: color-mix(in srgb, var(--zen-urlbar-background-base) 60%, transparent) !important;
    border-radius: 1em !important;
  }
}

/* trackpad gestures*/
tabpanels .browserStack browser {
  @media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s !important;
  }
}

/* Previous animation*/
.browserStack:has(
    #historySwipeAnimationPreviousArrow:not([style="translate: none;"])
  )
  browser {
  @media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
    scale: 0.95 !important;
    transform: translateX(3%) !important;
    border-radius: 2em !important;
  }
}

/* Next animation*/
.browserStack:has(
    #historySwipeAnimationNextArrow:not([style="translate: none;"])
  )
  browser {
  @media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
    scale: 0.95 !important;
    transform: translateX(-3%) !important;
    border-radius: 2em !important;
  }
}

/* no tab image */
:root:has(
    [mod-sameerasw_zen_empty_tab_logo="1"],
    [mod-sameerasw_zen_empty_tab_logo="2"],
    [mod-sameerasw_zen_empty_tab_logo="3"]
  ) {
  #browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
      background-image: var(
        --mod-sameerasw-zen_notab_img,
        url("https://raw.githubusercontent.com/zen-browser/branding/refs/heads/main/Official/Word%20Marks/SVG/zen_logo_icon_white.svg")
      ) !important;

      background-position: center !important;
      background-repeat: no-repeat !important;
      background-size: var(--mod-sameerasw-zen_notab_img_size, 150px) !important;
      opacity: var(--mod-sameerasw-zen_notab_img_opacity, 1) !important;
  }
}

:root:has(
    [mod-sameerasw_zen_empty_tab_logo="2"]
  ) {
  #browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
        filter: saturate(0) !important;
  }
}

:root:has(
    [mod-sameerasw_zen_empty_tab_logo="3"]
  ) {
  #browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
        filter: saturate(0) !important;

        @media (prefers-color-scheme: light) {
          filter: saturate(0) invert(1) !important;
        }
  }
}

/* ============= Transparent Sidebar: Mask or Push ============= */

:root:has(
    [mod-sameerasw_zen_compact_sidebar_type="1"],
    [mod-sameerasw_zen_compact_sidebar_type="2"]
  ) {
  #zen-main-app-wrapper {
    --zen-sidebar-custom-width: var(
      --mod-sameerasw-zen_compact_sidebar_width,
      165px
    ) !important;
  }

  [zen-compact-mode="true"] #navigator-toolbox {
    --zen-sidebar-width: var(--zen-sidebar-custom-width) !important;
    --actual-zen-sidebar-width: var(--zen-sidebar-custom-width) !important;
    width: var(--zen-sidebar-custom-width) !important;

    #titlebar{
      width: var(--zen-sidebar-width) !important;
    }
  }

  #zen-toolbar-background, #zen-toolbar-background::after, .zen-toolbar-background, .zen-toolbar-background::after{
  background-color: color-mix(in srgb, var(--arrowpanel-background) 30%, transparent) !important;
}
}

/* Shared: Soft mask background and shadow */
#main-window:has([mod-sameerasw_zen_compact_sidebar_type="2"])
  #titlebar::before {
  box-shadow: light-dark(#fff3, #0003) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
  background-color: light-dark(#fff8, #0005) !important;
}

/* Mask type - left sidebar */
#main-window:not([zen-right-side="true"]):has(
    [mod-sameerasw_zen_compact_sidebar_type="2"]
  )
  #zen-main-app-wrapper[zen-compact-mode="true"]:has(
    [zen-user-show=""],
    #navigator-toolbox[zen-has-hover="true"],
    [has-popup-menu=""]
  )
  #tabbrowser-tabpanels {
  mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--zen-sidebar-custom-width) + 10px),
    black calc(var(--zen-sidebar-custom-width) + 10px),
    black 100%
  ) !important;
}

/* Mask type - right sidebar */
#main-window[zen-right-side="true"]:has(
    [mod-sameerasw_zen_compact_sidebar_type="2"]
  )
  #zen-main-app-wrapper[zen-compact-mode="true"]:has(
    [zen-user-show=""],
    #navigator-toolbox[zen-has-hover="true"],
    [has-popup-menu=""]
  )
  #tabbrowser-tabpanels {
  mask-image: linear-gradient(
    to left,
    transparent 0,
    transparent calc(var(--zen-sidebar-custom-width) + 10px),
    black calc(var(--zen-sidebar-custom-width) + 10px),
    black 100%
  ) !important;
}

/* Push type - left sidebar */
#main-window:not([zen-right-side="true"]):has(
    [mod-sameerasw_zen_compact_sidebar_type="1"]
  )
  #zen-main-app-wrapper[zen-compact-mode="true"]:has(
    [zen-user-show=""],
    #navigator-toolbox[zen-has-hover="true"],
    [has-popup-menu=""]
  )
  #zen-appcontent-wrapper {
  transform: translateX(calc(var(--zen-sidebar-custom-width) + 10px)) !important;
}

/* Push type - right sidebar */
#main-window[zen-right-side="true"]:has(
    [mod-sameerasw_zen_compact_sidebar_type="1"]
  )
  #zen-main-app-wrapper[zen-compact-mode="true"]:has(
    [zen-user-show=""],
    #navigator-toolbox[zen-has-hover="true"],
    [has-popup-menu=""]
  )
  #zen-appcontent-wrapper {
  transform: translateX(calc(0px - var(--zen-sidebar-custom-width) - 10px)) !important;
}

/* Shared Push Transition (used in both left and right) */
#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"])
  #zen-appcontent-wrapper {
  --zen-compact-mode-func: linear(
    0 0%,
    0.002748 1%,
    0.010544 2%,
    0.022757 3%,
    0.038804 4%,
    0.058151 5%,
    0.080308 6%,
    0.104828 7%,
    0.131301 8%,
    0.159358 9%,
    0.188662 10%,
    0.21891 11%,
    0.249828 12%,
    0.281172 13%,
    0.312724 14%,
    0.344288 15%,
    0.375693 16%,
    0.40679 17%,
    0.437447 18%,
    0.467549 19%,
    0.497 20%,
    0.525718 21%,
    0.553633 22%,
    0.580688 23%,
    0.60684 24%,
    0.632052 25%,
    0.656298 26%,
    0.679562 27%,
    0.701831 28%,
    0.723104 29%,
    0.743381 30%,
    0.76267 31%,
    0.780983 32%,
    0.798335 33%,
    0.814744 34%,
    0.830233 35%,
    0.844826 36%,
    0.858549 37%,
    0.87143 38%,
    0.883498 39%,
    0.894782 40%,
    0.905314 41%,
    0.915125 42%,
    0.924247 43%,
    0.93271 44%,
    0.940547 45%,
    0.947787 46%,
    0.954463 47%,
    0.960603 48%,
    0.966239 49%,
    0.971397 50%,
    0.976106 51%,
    0.980394 52%,
    0.984286 53%,
    0.987808 54%,
    0.990984 55%,
    0.993837 56%,
    0.99639 57%,
    0.998664 58%,
    1.000679 59%,
    1.002456 60%,
    1.004011 61%,
    1.005363 62%,
    1.006528 63%,
    1.007522 64%,
    1.008359 65%,
    1.009054 66%,
    1.009618 67%,
    1.010065 68%,
    1.010405 69%,
    1.010649 70%,
    1.010808 71%,
    1.01089 72%,
    1.010904 73%,
    1.010857 74%,
    1.010757 75%,
    1.010611 76%,
    1.010425 77%,
    1.010205 78%,
    1.009955 79%,
    1.009681 80%,
    1.009387 81%,
    1.009077 82%,
    1.008754 83%,
    1.008422 84%,
    1.008083 85%,
    1.00774 86%,
    1.007396 87%,
    1.007052 88%,
    1.00671 89%,
    1.006372 90%,
    1.00604 91%,
    1.005713 92%,
    1.005394 93%,
    1.005083 94%,
    1.004782 95%,
    1.004489 96%,
    1.004207 97%,
    1.003935 98%,
    1.003674 99%,
    1.003423 100%
  ) !important;
  transition: transform 0.25s var(--zen-compact-mode-func) !important;
}

/* Push: transparent titlebar */
#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"])
  #titlebar::before {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Sidebar background transparency */
#sidebar-box {
  @media -moz-pref( "mod.sameerasw.zen_transparent_sidebar_enabled") {
  background-color: transparent !important;
  box-shadow: none !important;
  }
}

/* Custom background */
@media -moz-pref("mod.sameerasw.zen_bg_img_enabled") {
  @media -moz-pref("mod.sameerasw.zen_bg_img_not_fullscreen") {
    #main-window::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background: var(--mod-sameerasw-zen_bg_img) no-repeat center center fixed !important;
      background-size: cover !important;
      opacity: var(--mod-sameerasw-zen_bg_opacity, 1) !important;
      filter: blur(var(--mod-sameerasw-zen_bg_blur, 0)) !important;
    }
  }
  @media (display-mode: fullscreen) {
      #main-window::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: var(--mod-sameerasw-zen_bg_img) no-repeat center center fixed !important;
        background-size: cover !important;
        opacity: var(--mod-sameerasw-zen_bg_opacity, 1) !important;
        filter: blur(var(--mod-sameerasw-zen_bg_blur, 0)) !important;
      }
  }
}

/* Transparent glance */
.zen-glance-background > vbox {
  @media -moz-pref( "mod.sameerasw.zen_transparent_glance_enabled") {
    mask-image: linear-gradient(
    to right,
    black 0%,
    black 3.7%,
    transparent 6.7%,
    transparent 93.3%,
    black 96.3%,
    black 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;

  transition: all var(--zen-hidden-toolbar-transition), mask-image 0.3s ease-in-out 1s !important;
  }
}

.zen-glance-overlay > vbox {
  @media -moz-pref( "mod.sameerasw.zen_transparent_glance_enabled") {
    background-color: light-dark(#fff7, #0007) !important;
  border-radius: 1.5em !important;
  border: 1px solid light-dark(#ffff, #fff3);
  box-shadow:   4px 2px 60px light-dark(#0005, #0001), inset 0 2px 4px light-dark(#ffff, #fff3);
  }
}

.zen-glance-sidebar-container{
  @media -moz-pref( "mod.sameerasw.zen_transparent_glance_enabled") {
    background-color: light-dark(#fff7, #0007) !important;
    border-radius: 10em !important;
    margin: 0.5em;
    padding: 0 !important;
    border: 1px solid light-dark(#ffff, #fff5);
    box-shadow:   4px 2px 60px light-dark(#0005, #0001), inset 0 2px 4px light-dark(#ffff, #fff3);
    gap: 6px !important;
    height: fit-content !important;
    backdrop-filter: blur(10px) !important;

    toolbarbutton{
      margin: 0.5em !important;
    }
  }
}

/* Name: Floating Status Bar */
/* Description: Mod for Zen Browser that detaches the status bar from the bottom left corner of the browser window. */
/* Author: @AmirhBeigi */
@-moz-document url-prefix("chrome:") {    #statuspanel {    margin: 10px !important;  }    #statuspanel-label {    border-radius: 10000px !important;    padding: 2px 10px !important;    border: 1px solid var(--zen-colors-border) !important;    background: var(--zen-colors-tertiary) !important;  }  }
/* Name: SuperPins */
/* Description: This Zen Mod enhances pinned tabs/Essentials, by making some UI/UX changes. */
/* Author: @CosmoCreeper */
@media (-moz-pref("zen.tabs.vertical")) {
  /* Prevents stuff from being clipped off from bottom of Essentials */
  .zen-essentials-container {
    overflow: visible !important;
  }

  /* Makes essentials transparent (when toggled) */
  @media (-moz-pref("uc.essentials.color-scheme", "transparent")) {
    .tabbrowser-tab[zen-essential="true"]:not(:hover):not([selected="true"])
      .tab-stack
      .tab-background {
      background-color: transparent !important;
    }
  }

  @media (-moz-pref("zen.view.sidebar-expanded")) {
    /* Default essentials-width and essentials-gap variables (set to browser default) to fix some bugs */
    :root,
    .zen-essentials-container {
      --essentials-gap: calc(var(--zen-toolbox-padding) - 2px);

      @media (-moz-pref("uc.essentials.width", "Thin")) {
        --min-essentials-width-wrap: 50px !important;
      }

      @media (-moz-pref("uc.essentials.width", "Normal")) {
        --min-essentials-width-wrap: 60px !important;
      }

      @media (-moz-pref("uc.essentials.width", "Wide")) {
        --min-essentials-width-wrap: 70px !important;
      }

      @media (-moz-pref("uc.essentials.gap", "Small")) {
        --essentials-gap: 0px;
      }

      @media (-moz-pref("uc.essentials.gap", "Normal")) {
        --essentials-gap: 2px;
      }

      @media (-moz-pref("uc.essentials.gap", "Big")) {
        --essentials-gap: 5px;
      }
    }

    @media (-moz-pref("uc.essentials.width")) {
      @media (-moz-pref("uc.essentials.auto-grow")) {
        .tabbrowser-tab[zen-essential] {
          min-width: calc(100% - var(--zen-toolbox-padding) * 2) !important;
        }
      }

      @media (-moz-pref("uc.essentials.grid-count")) {
        .zen-essentials-container {
          grid-template-columns: repeat(
            var(--mod-superpins-essentials-grid-count),
            minmax(var(--min-essentials-width-wrap), auto)
          ) !important;
        }
      }
    }

    @media (-moz-pref("uc.essentials.gap")) {
      .zen-essentials-container {
        gap: var(--essentials-gap) var(--essentials-gap) !important;
      }
    }
  }

  @media (-moz-pref("uc.tabs.show-separator", "never")) {
    @media not (-moz-pref("uc.pins.separator-at-bottom")) {
        .pinned-tabs-container-separator {
          display: none !important;
        }
    }

    .zen-workspace-pinned-tabs-section:not(
        :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
      ):has(> :nth-child(2)) {
      &:has(> :nth-child(3)) {
        padding-bottom: 6px !important;
      }

      &:not(:has(.tabbrowser-tab)) {
        padding-bottom: 0 !important;
      }

      @media (-moz-pref("uc.pins.separator-at-bottom")) {
        &:has(.tabbrowser-tab), &:not(:has(.tabbrowser-tab)) {
          position: unset !important;
        }
      }
    }
  }

  @media (-moz-pref("uc.tabs.show-separator", "pinned-shown")) {
    .zen-workspace-pinned-tabs-section:not(
        :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
      ):not(:has(.tabbrowser-tab)):has(> :nth-child(2)) {
      padding-bottom: 0 !important;
    
      @media (-moz-pref("uc.pins.separator-at-bottom")) {
        position: unset !important;
      }

      @media not (-moz-pref("uc.pins.separator-at-bottom")) {
        .pinned-tabs-container-separator {
          display: none !important;
        }
      }
    }
  }

  @media (-moz-pref("uc.tabs.show-separator", "essentials-shown")) {
    zen-workspace[active="true"]:has(.zen-workspace-pinned-tabs-section .tabbrowser-tab) {
      &:has(
        ~ #zen-tabs-wrapper
          #zen-browser-tabs-container
          #vertical-pinned-tabs-container
          .zen-workspace-tabs-section[active="true"]
          .tabbrowser-tab
      ) {
        margin-top: 6px !important;
      }
    }

    .zen-essentials-container {
      &:has(> :nth-child(1)) ~ #zen-tabs-wrapper .zen-workspace-pinned-tabs-section {
        min-height: 20px !important;
      }
    }

    .zen-essentials-container {
      &:has(> :nth-child(1)) ~ #zen-tabs-wrapper .zen-workspace-pinned-tabs-section {
        .pinned-tabs-container-separator {
          max-height: unset !important;
        }
      }
    }
  }

  /* Enables legacy layout for pinned tabs (icon only in grid) */
  @media (-moz-pref("uc.pins.legacy-layout")) {
    .zen-tab-group-start {
      display: none;
    }

    #navigator-toolbox[zen-sidebar-expanded="true"] {
      & #tabbrowser-tabs {
        & .tabbrowser-tab {
          &[zen-pinned-changed="true"]:not([zen-essential])
            > .tab-stack
            > .tab-content
            > .tab-icon-stack {
            position: unset !important;
            top: unset !important;
          }
        }
      }
    }

    #vertical-pinned-tabs-container,
    .zen-workspace-pinned-tabs-section:not(
      :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
    ) {
      .tabbrowser-tab[pinned] {
        .tab-close-button,
        .tab-reset-button,
        .tab-reset-pin-button,
        .tab-label-container {
          display: none !important;
        }
      }
    }

    /*disable icon shift when tab was renamed*/
    #navigator-toolbox[zen-sidebar-expanded="true"] {
      & #vertical-pinned-tabs-container > .zen-workspace-tabs-section,
      & .zen-workspace-pinned-tabs-section {
        & .tabbrowser-tab > .tab-stack > .tab-content > .tab-icon-stack {
          left: unset !important;
        }
      }
    }

    /* Make pinned tabs auto-grow to span full width of row */
    @media (-moz-pref("uc.pins.auto-grow")) {
      .zen-workspace-pinned-tabs-section:not(
        :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
      ) {
        &,
        zen-folder > .tab-group-container {
          display: flex !important;
          flex-wrap: wrap !important;
          flex-direction: row !important;

          & > zen-folder {
            flex-basis: 100%;
          }

          & > .tabbrowser-tab {
            width: auto !important;
            min-width: var(--tab-pinned-min-width-expanded) !important;
            flex: 1 1 auto !important;
          }

          & > tab-group {
            width: 100% !important;
          }
        }

        /* Overwrite orient="vertical" styling quirk */
        &[orient="vertical"] {
          writing-mode: vertical-lr;
          block-size: calc(
            var(--actual-zen-sidebar-width) - var(--zen-toolbox-padding) * 2
          ) !important;

          & > * {
            writing-mode: horizontal-tb;
          }
        }
      }

      @media (-moz-pref("uc.pins.grid-count")) {
        /* Logic for pinned tabs that have auto-grow and grid-count. Must use +1 to fix */
        #vertical-pinned-tabs-container > .zen-workspace-tabs-section,
        .zen-workspace-pinned-tabs-section:not(
          :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
        ) {
          & > .tabbrowser-tab {
            width: calc(100% / (var(--mod-superpins-pins-grid-count) + 1)) !important;
          }
        }
      }
    }

    @media not (-moz-pref("uc.pins.auto-grow")) {
      .zen-workspace-pinned-tabs-section:not(
        :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
      ) {
        &,
        zen-folder > .tab-group-container {
          grid-template-columns: repeat(
            auto-fit,
            minmax(var(--tab-pinned-min-width-expanded), auto)
          ) !important;
          display: grid !important;

          @media (-moz-pref("uc.pins.grid-count")) {
            grid-template-columns: repeat(
              var(--mod-superpins-pins-grid-count),
              minmax(var(--tab-pinned-min-width-expanded), auto)
            ) !important;
          }
        }

        zen-folder {
          grid-column: -1 / 1;
        }
      }
    }

    /* The actual grid layout */
    .zen-workspace-pinned-tabs-section:not(
      :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
    ) {
      &:has(> :nth-child(3)),
      zen-folder > .tab-group-container:has(> :nth-child(3)) {
        position: relative !important;
        overflow: visible !important;
        gap: 3px 3px !important;
        max-width: calc(100% - var(--zen-toolbox-padding) * 2) !important;
      }

      &:has(> :nth-child(3)) {
        margin: 0 var(--zen-toolbox-padding) !important;
        padding: 0 var(--zen-toolbox-padding) !important;
      }

      &:has(> :nth-child(2)) {
        position: relative !important;
        padding-bottom: 25px !important;
      }

      .tabbrowser-tab {
        --toolbarbutton-inner-padding: 0;

        &[aria-hidden="true"] {
          display: none;
        }
      }

      .tab-icon-stack {
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
      }

      & > *:not(tab-group) {
        margin: 0 !important;
      }

      & > tab-group .tab-icon-stack {
        margin: auto !important;
      }

      zen-folder > .tab-group-container:has(> :nth-child(3)) {
        margin-inline-start: 14px !important;

        & > * {
          margin-inline-start: 0 !important;
          margin-left: 0 !important;
        }
      }

      zen-folder[collapsed] .tab-group-container {
        display: none !important;
      }
    }

    .pinned-tabs-container-separator {
      position: absolute !important;
      bottom: 0 !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: calc(100% - var(--zen-toolbox-padding) * 2) !important;
    }

    @media (-moz-pref("arcline.superpin")) {
      .pinned-tabs-container-separator {
        bottom: -4px !important;
      }
    }
  }

  /* Make Essentials look more box like */
  @media (-moz-pref("uc.essentials.box-like-corners")) {
    .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
      border-radius: 5px !important;
    }
  }

  /* If Essentials have a grid count but do not have auto-grow on */
  @media (-moz-pref("uc.essentials.grid-count")) {
    .zen-essentials-container {
      grid-template-columns: repeat(
        var(--mod-superpins-essentials-grid-count),
        minmax(var(--min-essentials-width-wrap), auto)
      ) !important;
    }
  }

  /* Make Essentials auto-grow to span full width of a row */
  @media (-moz-pref("uc.essentials.auto-grow")) {
    .tabbrowser-tab[zen-essential="true"] {
      width: auto !important;
      min-width: var(--min-essentials-width-wrap) !important;
      flex: 1 1 auto !important;
    }

    @media (-moz-pref("uc.essentials.grid-count")) {
      /* For auto-grow with grid-count. must use +1 to fix a bug */
      .tabbrowser-tab[zen-essential="true"] {
        width: calc(100% / (var(--mod-superpins-essentials-grid-count) + 1)) !important;
      }
    }

    .zen-essentials-container {
      display: flex !important;
      flex-wrap: wrap !important;
      flex-direction: row !important;
      width: 100% !important;

      &[data-hack-type="1"] .tabbrowser-tab {
        min-width: max(30%, var(--min-essentials-width-wrap)) !important;
        max-width: auto;
      }

      &[data-hack-type="2"] .tabbrowser-tab {
        min-width: max(23%, var(--min-essentials-width-wrap)) !important;
        max-width: 1fr;
      }

      &[data-hack-type="3"] .tabbrowser-tab {
        min-width: max(25%, 48px) !important;
        max-width: 1fr;
      }
    }

    #navigator-toolbox {
      min-width: min-content !important;
    }
  }

  /* Puts Essentials at the bottom */
  @media (-moz-pref("uc.essentials.position", "bottom")) {
    #tabbrowser-arrowscrollbox {
      position: relative !important;
      overflow-x: hidden !important;
    }

    .zen-essentials-container {
      position: relative !important;
      margin-top: auto !important;
      padding-top: 8px !important;
    }

    /* Adds padding-bottom only when media controls are visible */
    #zen-media-controls-toolbar:not([hidden]) ~ .zen-essentials-container {
      padding-bottom: 10px !important;
    }

    #zen-essentials {
      order: 999 !important;
      margin-bottom: 5px;
    }

    #tabbrowser-arrowscrollbox > zen-workspace {
      width: 100% !important;
      padding-top: 0 !important;
    }

    #navigator-toolbox[zen-sidebar-expanded="true"] {
      .zen-essentials-container {
        min-width: 100% !important;
        width: 100% !important;
      }
    }
  }

  @media (-moz-pref("uc.essentials.position", "bottom")) and (-moz-pref("zen.workspaces.indicator-position", "bottom")) {
    .zen-current-workspace-indicator {
      margin-bottom: -10px;
      margin-right: 0.5px;
    }
  }

  /* Adds a little bg to the pinned tabs */
  @media (-moz-pref("uc.pins.bg")) {
    @media (prefers-color-scheme: light) {
      :root {
        --pins-bg-percentage: 40%;
      }
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --pins-bg-percentage: 7%;
      }
    }

    .zen-workspace-pinned-tabs-section:not(
      :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
    ) {
      /* 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,
          white var(--pins-bg-percentage),
          transparent
        ) !important;
      }

      /* background color when hovering */
      .tabbrowser-tab[pinned]:hover .tab-stack .tab-background {
        background-color: color-mix(
          in srgb,
          white calc(var(--pins-bg-percentage) + 3%),
          transparent
        ) !important;
      }

      /* background color when selected */
      .tabbrowser-tab[pinned][selected="true"] .tab-stack .tab-background,
      .tabbrowser-tab[pinned][multiselected="true"] .tab-stack .tab-background {
        background-color: color-mix(
          in srgb,
          white calc(var(--pins-bg-percentage) + 16%),
          transparent
        ) !important;
      }

      /* background color when selected and hovering*/
      .tabbrowser-tab[pinned][selected="true"]:hover .tab-stack .tab-background,
      .tabbrowser-tab[pinned][multiselected="true"]:hover .tab-stack .tab-background {
        background-color: color-mix(
          in srgb,
          white calc(var(--pins-bg-percentage) + 18%),
          transparent
        ) !important;
      }
    }
  }

  @media (-moz-pref("uc.pins.transition-bg")) {
    .tabbrowser-tab[pinned]:not([zen-essential]) .tab-background {
      transition: background-color var(--uc-pins-transition-speed) ease;
    }
  }

  @media (-moz-pref("uc.essentials.transition-bg")) {
    .tabbrowser-tab[zen-essential] .tab-background {
      transition: background-color var(--uc-essentials-transition-speed) ease;
    }
  }

  /* Adds border to Pins/Essentials (when toggled) */
  @media (-moz-pref("uc.superpins.border", "essentials")) {
    .zen-essentials-container {
      & .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
        border: 1px solid
          light-dark(
            color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
            color-mix(in srgb, var(--zen-colors-secondary) 80%, white)
          ) !important;
      }
    }
  }

  @media (-moz-pref("uc.superpins.border", "pins")) {
    .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background,
    #vertical-pinned-tabs-container > .zen-workspace-tabs-section tab-group,
    .zen-workspace-pinned-tabs-section tab-group {
      border: 1px solid
        light-dark(
          color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
          color-mix(in srgb, var(--zen-colors-secondary) 80%, white)
        ) !important;
    }
  }

  @media (-moz-pref("uc.superpins.border", "both")) {
    .tabbrowser-tab[pinned] .tab-stack .tab-background,
    #vertical-pinned-tabs-container > .zen-workspace-tabs-section tab-group,
    .zen-workspace-pinned-tabs-section tab-group {
      border: 1px solid
        light-dark(
          color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
          color-mix(in srgb, var(--zen-colors-secondary) 80%, white)
        ) !important;
    }
  }

  /* Let pinned tabs have the same selected styling as essentials */
  @media (-moz-pref("uc.pins.essentials-layout")) {
    /* Specific query to overwrite previous one */
    .zen-workspace-pinned-tabs-section:not(
        :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
      ):has(> :nth-child(3)) {
      @media (-moz-pref("uc.essentials.width")) {
        grid-template-columns: repeat(
          auto-fit,
          minmax(var(--min-essentials-width-wrap), auto)
        ) !important;

        & > .tabbrowser-tab {
          min-width: var(--min-essentials-width-wrap) !important;
        }
      }

      @media (-moz-pref("uc.essentials.gap")) {
        gap: var(--essentials-gap) var(--essentials-gap) !important;
      }
    }

    @media (-moz-pref("uc.pins.grid-count")) {
      .zen-workspace-pinned-tabs-section {
        grid-template-columns: repeat(
          var(auto-fit, --mod-superpins-pins-grid-count),
          minmax(var(--min-essentials-width-wrap), auto)
        ) !important;
      }
    }
  }

  /* pins height */
  :root {
    --pins-height: var(--tab-min-height);
  }

  @media (-moz-pref("uc.pinned.height", "small")) {
    :root {
      --pins-height: 40px;
    }
  }

  @media (-moz-pref("uc.pinned.height", "normal")) {
    :root {
      --pins-height: 50px;
    }
  }

  @media (-moz-pref("uc.pinned.height", "large")) {
    :root {
      --pins-height: 60px;
    }
  }

  @media (-moz-pref("uc.pinned.height")) {
    .zen-workspace-pinned-tabs-section .tabbrowser-tab {
      height: var(--pins-height) !important;
    }
  }

  @media (-moz-pref("uc.essentials.same-height")) {
    .tabbrowser-tab[zen-essential] {
      height: var(--pins-height) !important;
    }

    .tabbrowser-tab[zen-essential] .tab-background {
      min-height: var(--pins-height) !important;
    }
  }

  /* favicon size */
  @media (-moz-pref("uc.favicon.size", "small")) {
    .tab-icon-pending,
    .tab-icon-image,
    .tab-sharing-icon-overlay,
    .tab-icon-overlay {
      height: 16px !important;
      width: 16px !important;
    }

    /* No need to scale tab throbber as it is same size. */
  }

  @media (-moz-pref("uc.favicon.size", "normal")) {
    .tab-icon-pending,
    .tab-icon-image,
    .tab-sharing-icon-overlay,
    .tab-icon-overlay {
      height: 18px !important;
      width: 18px !important;
    }

    .tab-throbber {
      transform: scale(1.125) !important;
    }
  }

  @media (-moz-pref("uc.favicon.size", "large")) {
    .tab-icon-pending,
    .tab-icon-image,
    .tab-sharing-icon-overlay,
    .tab-icon-overlay {
      height: 20px !important;
      width: 20px !important;
    }

    .tab-throbber {
      transform: scale(1.25) !important;
    }
  }

  /* workspace icons size */
  @media (-moz-pref("uc.workspace.icon.size", "x-small")) {
    #zen-workspaces-button {
      font-size: x-small !important;
    }
  }

  @media (-moz-pref("uc.workspace.icon.size", "small")) {
    #zen-workspaces-button {
      font-size: small !important;
    }
  }

  @media (-moz-pref("uc.workspace.icon.size", "medium")) {
    #zen-workspaces-button {
      font-size: medium !important;
    }
  }

  @media (-moz-pref("uc.workspace.icon.size", "large")) {
    #zen-workspaces-button {
      font-size: large !important;
    }
  }

  /* current workspace icons size */
  @media (-moz-pref("uc.workspace.current.icon.size", "small")) {
    .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
      font-size: 12px !important;
    }
  }

  @media (-moz-pref("uc.workspace.current.icon.size", "normal")) {
    .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
      font-size: 14.5px !important;
    }
  }

  @media (-moz-pref("uc.workspace.current.icon.size", "large")) {
    .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
      font-size: 16px !important;
    }
  }

  /* Increase margin below Essentials in case the workspace indicator is not visible. */
  @media not (-moz-pref("zen.workspaces.show-workspace-indicator")) {
    .zen-current-workspace-indicator {
      display: none !important;
    }

    .zen-essentials-container {
      padding-bottom: 5px;
    }

    @media not (-moz-pref("uc.tabs.show-separator", "essentials-shown")) {
      #tabbrowser-tabs:has(.zen-essentials-container) #zen-tabs-wrapper {
        margin-top: 6px !important;
      }
    }
  }

  /* Ensure that the browser uses SuperPins dim rather than the built-in dim-pending. */
  .tab-icon-image[pending="true"],
  .tabbrowser-tab[pending="true"] .tab-text {
    opacity: 1 !important;
  }

  /* If dim-type is set to icons. */
  @media (-moz-pref("uc.tabs.dim-type", "icons")) {
    .tab-icon-image[pending="true"] {
      opacity: 0.5 !important;
    }
  }

  /* If dim-type is set to text. */
  @media (-moz-pref("uc.tabs.dim-type", "text")) {
    .tabbrowser-tab[pending="true"] .tab-text {
      opacity: 0.5 !important;
    }
  }

  /* If dim-type is set to icon + text. */
  @media (-moz-pref("uc.tabs.dim-type", "both")) {
    .tab-icon-image[pending="true"],
    .tabbrowser-tab[pending="true"] .tab-text {
      opacity: 0.5 !important;
    }
  }

  @media (-moz-pref("uc.tabs.strikethrough-on-pending")) {
    .tabbrowser-tab[pending="true"] .tab-text {
      text-decoration: line-through !important;
    }
  }

  @media (-moz-pref("uc.pins.stay-at-top")) {
    zen-workspace > arrowscrollbox.workspace-arrowscrollbox {
      overflow-y: hidden !important;
      flex-basis: 100%;
    }

    #tabbrowser-arrowscrollbox .zen-workspace-pinned-tabs-section {
      flex: 0 1 0;
    }

    #tabbrowser-arrowscrollbox .zen-workspace-normal-tabs-section {
      flex: 1 1 0;
      overflow-y: auto !important;
      margin-bottom: 5px;
    }
  }

  @media (-moz-pref("uc.pins.active-bg")) {
    .zen-workspace-pinned-tabs-section:not(
      :has([zen-dragtarget], zen-folder .tab-group-label-container[zen-dragtarget])
    ) {
      .tabbrowser-tab[pinned][selected="true"] .tab-stack .tab-background {
        background-color: var(--mod-superpins-pins-active-bg) !important;
        opacity: 1 !important;
      }

      .tabbrowser-tab[pinned][selected="true"]:hover .tab-stack .tab-background {
        opacity: 0.8 !important;
        background-color: var(--mod-superpins-pins-active-bg) !important;
      }
    }
  }

  @media (-moz-pref("zen.workspaces.indicator-name-center")) {
    .zen-current-workspace-indicator-stack {
      position: absolute;
    }

    .zen-current-workspace-indicator-name {
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
    }
  }

  @media (-moz-pref("zen.workspaces.indicator-position", "top")),
    (-moz-pref("zen.workspaces.indicator-position", "bottom")) {
    .zen-current-workspace-indicator {
      position: fixed !important;

      &::before {
        width: calc(100% - var(--zen-toolbox-padding) * 2.6) !important;
      }
    }

    .zen-workspaces-actions {
      padding: 0 2px !important;
    }

    .zen-workspace-pinned-tabs-section {
      margin-top: 4px !important;
    }

    #zen-essentials {
      margin-bottom: 5px;
    }
  }

  @media (-moz-pref("zen.workspaces.indicator-position", "top")) {
    zen-workspace {
      overflow: visible !important;
      padding-bottom: 50px !important;
    }

    #zen-essentials {
      margin-top: 48px;
    }

    .zen-current-workspace-indicator {
      top: -48px;
    }
  }

  @media (-moz-pref("zen.workspaces.indicator-position", "bottom")) {
    .workspace-arrowscrollbox {
      margin-bottom: 48px !important;
    }

    .zen-current-workspace-indicator {
      bottom: 5px;
    }
  }

  @media (-moz-pref("uc.remove-sidebar-scrollbar")) {
    scrollbox:nth-child(5),
    #tabbrowser-arrowscrollbox .zen-workspace-normal-tabs-section {
      scrollbar-width: none !important;
    }
  }
}

/* Name: Zen Context Menu */
/* Description: Declutter your right click menu, hide options you don't need */
/* Author: @KiKaraage */
/* Zen Context Menu v3.1 by KiKaraage */

/* Fix ergonomics for tab context menu by applying some reorderings 
* plus hiding disabled options and some separators
* Applied by default when enabling Zen Context Menu mod */
@media -moz-pref("uc.fixcontext.ergonomicsfortabs") {
  #tabContextMenu {
    :nth-child(22), /* Separator below "Duplicate Tab" */
    #context_bookmarkTab, #context_bookmarkSelectedTabs,
    #context_moveTabOptions,
    #context_selectAllTabs, :nth-child(31), /* Separator below "Select All Tabs" */
    #context_selectedAllTabs, #toolbar-context-selectAllTabs,
    #context_closeTabOptions,
    :nth-child(37), /* Separator below "Split Tabs" */
    #context_zen-pinned-tab-separator, /* Separator above Replace Pinned URL */
    #context_zenSplitTabs[label="Split Tab (multiple selected tabs needed)"],
    #context_zenSplitTabs[disabled="true"],
    #context_closeDuplicateTabs[disabled]{
      display: none;
    }
    #context_toggleMuteTab,
    #context_toggleMuteSelectedTabs,
    #context_zen-add-essential,
    #context_zen-remove-essential,
    #context_pinTab,
    #context_pinSelectedTabs,
    #context_unpinTab,
    #context_unpinSelectedTabs,
    #context_zenSplitTabs:not([disabled="true"]) {
      order: -8 !important;
    }
    #context_duplicateTab,
    #context_duplicateTabs,
    #context_unloadTab {
      order: -7 !important;
    }
    :nth-child(6), /* Separator below "New Folder" */
    #zen-context-menu-new-folder {
      order: -6 !important;
    }
    #context_moveTabToGroup,
    #context_reopenInContainer,
    #context-zen-change-workspace-tab {
      order: -5 !important;
    }
    :nth-child(35), /* Separator below "Change Tabs to Workspace" */ 
    #context_sendTabToDevice,
    #context_zenSplitTabs,
    #context_undoCloseTab {
      order: -3 !important;
    } 
    #context_closeTab,
    #context_closeDuplicateTabs,
    #context_zen-reset-pinned-tab,
    #context_zen-replace-pinned-url-with-current {
      order: 2;
    }
  }
}
/* Hide all separators */
@media -moz-pref("uc.hidecontext.separators") {
  menuseparator::before {
    border-top: none !important;
  }
  menuseparator {
    padding-block: 0px !important;
  }
}
/* Hide all icons in context menu, except checkboxes and radio buttons, to fit current Zen styling */
@media -moz-pref("uc.hidecontext.icons") {
  :not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup
  > menuitem:not(
  .menuitem-iconic,
  [type='checkbox'],
  [type='radio'],
  .in-menulist,
  .in-menulist menuitem,
  .unified-nav-current
  ),
  :not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup
  > menu:not(
  .menu-iconic,
  [type='checkbox'],
  [type='radio'],
  .in-menulist,
  .in-menulist menu,
  .unified-nav-current
  ),
  :not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menucaption {
    padding-inline: 6px !important;
  }
  menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
    --menu-image: none !important;
    margin-inline-start: 4px !important;
    @media not (-moz-platform: windows) {
      margin-inline-end: 0 !important;
      padding-inline-end: 0 !important;
    }
  }
  .textbox-contextmenu,
  menupopup:has(menuitem[type="radio"], menuitem[type="checkbox"]),
  menu:has(menuitem[type="radio"], menuitem[type="checkbox"]) {
    .menu-icon {
      display: none !important;
    }
    menuitem[type="radio"],
    menuitem[type="checkbox"],
    #context-navigation {
      .menu-icon {
        display: inherit !important;
      }
    }
  }
  menupopup[needsgutter] {
    @media (-moz-platform: windows) {
      & > menu:not([icon], .menu-iconic), & > menuitem:not([checked="true"], [icon], .menuitem-iconic) {
        padding-inline-start: 12px !important;
      }
    }
  }
}
/* Apply Zen workspace gradient to all context menu and panels
* Suitable if the OS, desktop environment or window manager supported blur background */
@media -moz-pref("uc.fixcontext.applyzengradient") {
  menupopup, panel {
    --panel-background: var(--zen-main-browser-background) !important;
  }
  /* Fix text color on Firefox confirmation pop-ups when applying Zen colors on light mode */
  #confirmation-hint {
    --arrowpanel-color: var(--sidebar-text-color) !important;
    border: none !important;
  }
}
/* Apply Zen workspace accent color to all context menu and panels*/
@media -moz-pref("uc.fixcontext.applyzenaccent") {
  menupopup, panel {
    --panel-background: color-mix(in srgb, var(--zen-primary-color) 40%, var(--zen-colors-tertiary)) !important;
  }
}
/* Prioritize “Copy Clean Link" when available, otherwise, only show "Copy Link” */
@media -moz-pref("uc.hidecontext.copylink") {
  #contentAreaContextMenu:has(#context-stripOnShareLink[disabled="false"]) {
    #context-copylink {
      display: none !important;
    }
  }
  #context-stripOnShareLink[disabled="true"] {
    display: none !important;
  }
}
/* Hide "Bookmark Link” */
@media -moz-pref("uc.hidecontext.bookmark") {
  #toolbar-context-bookmarkSelectedTab,
  #toolbar-context-bookmarkSelectedTabs,
  #context-bookmarklink {
    display: none !important;
  }
}
/* Hide "Mute Tab" option */
@media -moz-pref("uc.hidecontext.mutetab") {
  #context_toggleMuteTab,
  #context_toggleMuteSelectedTabs,
  #context_playTab,
  #context_playSelectedTabs {
    display: none !important;
  }
}
/* Hide “Open Tab/Link in New Container Tab” */
@media -moz-pref("uc.hidecontext.newcontainer") {
  #context_reopenInContainer,
  #context-openlinkinusercontext-menu {
    display: none !important;
  }
}
/* Hide “Send Tab/Link to Device” */
@media -moz-pref("uc.hidecontext.sendtodevice") {
  #context_sendTabToDevice,
  #context-sendpagetodevice,
  #context-sendlinktodevice,
  #context-sep-sendlinktodevice {
    display: none !important;
  }
}
/* Hide "Close Tabs" & "Close Duplicate Tabs"*/
@media -moz-pref("uc.hidecontext.closetab") {
  #context_closeTab,
  #context_closeDuplicateTabs {
    display: none !important;
  }
}
/* Hide “Search Keywords" with your preferred search engine */
@media -moz-pref("uc.hidecontext.search") {
  #context-searchselect {
    display: none !important;
  }
}
/* Hide “Search Keywords in a Private Window” */
@media -moz-pref("uc.hidecontext.searchinpriv") {
  #context-searchselect-private {
    display: none !important;
  }
}
/* Hide "Translate Selection/Link" options */
@media -moz-pref("uc.hidecontext.translate") {
  #context-translate-selection,
  #frame-sep {
    display: none !important;
  }
}
/* Hide "Ask AI chatbot" options */
@media -moz-pref("uc.hidecontext.askchatbot") {
  #context-ask-chat {
    display: none !important;
  }
}
/* Hide "Print Selection” */
@media -moz-pref("uc.hidecontext.printselection") {
  #context-print-selection {
    display: none !important;
  }
}
/* Hide “Email Image”, “Set Image as Desktop Background”, and “View Image Info” options */
@media -moz-pref("uc.hidecontext.image") {
  #context-sendimage,
  #context-sep-setbackground,
  #context-setDesktopBackground,
  #context-sep-sharing,
  #context-viewimageinfo {
    display: none !important;
  }
}
/* Hide "Copy Video Link", "Copy Audio Link", "Email Video" and "Email Audio" options */
@media -moz-pref("uc.hidecontext.audiovideo") {
  #context-copyvideourl,
  #context-copyaudiourl,
  #context-sendvideo,
  #context-sendaudio,
  #context-sep-sharing {
    display: none !important;
  }
}
/* Hide "Check Spelling" and "Text/Page Direction" option while typing in text fields */
@media -moz-pref("uc.hidecontext.checkspelling") {
  #spell-separator,
  #spell-check-enabled,
  #spell-add-dictionaries-main,
  #spell-dictionaries,
  #context-sep-bidi,
  #context-bidi-text-direction-toggle,
  #context-bidi-page-direction-toggle {
    display: none !important;
  }
}
/* Hide "Take Screenshot" option */
@media -moz-pref("uc.hidecontext.screenshot") {
  #context-take-screenshot,
  #context-sep-screenshots,
  #frame-sep {
    display: none !important;
  }
}
/* Hide "This Frame" option */
@media -moz-pref("uc.hidecontext.frame") {
  #frame-sep, #frame {
    display: none !important;
  }
}
/* Hide “Select All Text” option */
@media -moz-pref("uc.hidecontext.selectalltext") {
  #context-selectall,
  #context-sep-selectall {
    display: none !important;
  }
}
/* Hide “Reload Tab” option */
@media -moz-pref("uc.hidecontext.reloadtab") {
  #context_reloadTab,
  #context_reloadSelectedTabs,
  #toolbar-context-reloadSelectedTab,
  #toolbar-context-reloadSelectedTabs {
    display: none !important;
  }
}
/* Hide "Duplicate Tab" */
@media -moz-pref("uc.hidecontext.duplicatetab") {
  #context_duplicateTab,
  #context_duplicateTabs,
  #tabContextMenu > :nth-child(21) {
    display: none !important;
  }
}
/* Hide “View Page Source”, "View Selection Source" and “Inspect” options */
@media -moz-pref("uc.hidecontext.inspect") {
  #context-viewsource,
  #context-inspect-a11y,
  #context-inspect,
  #inspect-separator,
  #context-media-eme-separator,
  #context-viewpartialsource-selection {
    display: none !important;
  }
}
/* Hide “Save Page As and Save Link As” */
@media -moz-pref("uc.hidecontext.savelink") {
  #context-savepage,
  #context-savelink {
    display: none !important;
  }
}
/* Hide "Pin Tab" and "Add to Essentials" options */
@media -moz-pref("uc.hidecontext.pin") {
  #context_pinTab,
  #context_unpinTab,
  #context_pinSelectedTabs,
  #context_unpinSelectedTabs,
  #context_zen-add-essential,
  #context_zen-remove-essential {
    display: none !important;
  }
}
/* Hide top buttons (Back, Forward, Reload, Bookmark Page) on page context menu */
@media -moz-pref("uc.hidecontext.navigation") {
  #context-navigation, #context-sep-navigation {
    display: none !important;
  }
}


/* Restore back context menu icons pre-1.12.9b */
/* I'm not guaranteeing there will be icons for future context menu options */
/* Help me contribute on this, hit me up on github.com/KiKaraage/ZenMods/issues */

/* PART 1: Setting inline padding and margin values */
:root {
  @media -moz-pref("uc.fixcontext.restoreicons") {
    --zen-contextmenu-menuitem-padding-inline: 5px !important;
    --zen-contextmenu-menuicon-margin-inline: 3px !important;
    --zen-contextmenu-menuitem-margin: 0px 2px !important;
  }
}

@media -moz-pref("uc.fixcontext.restoreicons") {
  /* PART 2: Adding start inline padding to options, 
  * For now this also affected items with existing paddings
  * Like on toolbar context menu, or on extension options
  * Help me fix this, hit me up on github.com/KiKaraage/ZenMods/issues */
  .menu-text {
    @media (-moz-platform: windows) {
      padding-inline-start: 24px !important;
    }
  }   

  /* PART 3: Adding icons back to regular context menu options */
  :not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup
  > menuitem:not(
  .menuitem-iconic,
  [type='checkbox'],
  [type='radio'],
  .in-menulist,
  .in-menulist menuitem,
  .unified-nav-current
  ) {
    background-image: var(--menu-image) !important;
    background-size: 16px !important;
    background-position: var(--zen-contextmenu-menuitem-padding-inline) center !important;
    background-repeat: no-repeat !important;
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
  }

  /* PART 4: Adding icons back to context menu options that has arrow */
  :not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup > menu:not(
  .menu-iconic, [type='checkbox'], [type='radio'],
  .in-menulist, .in-menulist menu, .unified-nav-current
  ),
  #toggle_toolbar-menubar,
  #PanelUI-history toolbarbutton,
  #unified-extensions-context-menu menuitem {
    background-image: var(--menu-image) !important;
    background-size: 16px !important;
    background-position: var(--zen-contextmenu-menuitem-padding-inline) center !important;
    background-repeat: no-repeat !important;
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important; 
  }

  /* PART 5: Normalize left padding for options with checkboxes, like Compact Mode options
  * Still not applied to options like 'Tabs on the right' sadly
  * Help me fix this, hit me up on github.com/KiKaraage/ZenMods/issues */
  @media (-moz-platform: windows) {
    @media -moz-pref("uc.fixcontext.restoreicons") {
      menupopup > menuitem[checked='true'] {
        padding-inline-start: var(--zen-contextmenu-menuicon-margin-inline) !important;
        > .menu-text {
          padding: 0 !important;
        }
      }
      menupopup > menuitem[checked='false'] {
        padding-inline: calc(var(--zen-contextmenu-menuicon-margin-inline) + 0px) !important;
      }
    }
  }
}

/* PART 6: Specifying icons to apply for options in Unified Extensions Menu */
@media not (-moz-platform: linux) {
  @media -moz-pref("uc.fixcontext.restoreicons") {
    .unified-extensions-context-menu-pin-to-toolbar {
      --menu-image: url('chrome://browser/skin/zen-icons/pin.svg');
    }
  }
  .unified-extensions-context-menu-move-widget-down {
    --menu-image: url('chrome://browser/skin/zen-icons/arrow-down.svg');
  }
  .unified-extensions-context-menu-move-widget-up {
    --menu-image: url('chrome://browser/skin/zen-icons/arrow-up.svg');
  }
}

/* PART 7:  Specifying icons to apply for other context menu options */
/* Use icons from Zen icon directory - chrome://browser/skin/zen-icons/ */
/* Use icons from Firefox icon directory - chrome://browser/skin/ */
@media -moz-pref("uc.fixcontext.restoreicons") {  
  #context_zenSplitTabs {
    --menu-image: url('chrome://browser/skin/zen-icons/sidebars-right.svg') !important;
  }
  #context-zenSplitLink {
    --menu-image: url('chrome://browser/skin/zen-icons/split.svg') !important;
  }

  #context_zenOpenWorkspace,
  #context_zenOpenWorkspacePanel {
    --menu-image: url('chrome://browser/skin/zen-icons/manage.svg') !important;
  }
  #context_zenEditWorkspaceIcon {
    --menu-image: url('chrome://browser/skin/zen-icons/canvas.svg') !important;
  }
  .zenToolbarThemePicker,
  #zenToolbarThemePicker {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-theme.svg') !important;
  }
  #context-video-pictureinpicture:not([checked='true']) .menu-iconic-icon {
    list-style-image: url('chrome://browser/skin/zen-icons/media-pip.svg') !important;
  }
  #context-media-loop:not([checked='true']) .menu-iconic-icon {
    list-style-image: url('chrome://browser/skin/zen-icons/media-loop.svg') !important;
  }

  #context-savepage {
    --menu-image: url('chrome://browser/skin/zen-icons/save.svg');
  }
  #context-selectall,
  .textbox-contextmenu menuitem[cmd*='selectAll'],
  #context_selectAllTabs,
  #toolbar-context-selectAllTabs {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-select-all.svg');
  }
  #context-undo,
  .textbox-contextmenu menuitem[cmd*='undo'],
  #context_undoCloseTab,
  #toolbar-context-undoCloseTab {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-undo.svg');
  }
  #toggle_toolbar-menubar {
    --menu-image: url('chrome://browser/skin/zen-icons/menu-bar.svg');
  }
  #context-redo,
  .textbox-contextmenu menuitem[cmd*='redo'] {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-redo.svg');
  }
  #context-copy,
  .textbox-contextmenu menuitem[cmd*='copy'],
  .textbox-contextmenu #strip-on-share,
  #placesContext_copy {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-copy.svg');
  }
  #context-paste,
  .textbox-contextmenu menuitem[cmd*='paste'],
  #placesContext_paste,
  #placesContext_paste_group {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-paste.svg');
  }
  #context-cut,
  .textbox-contextmenu menuitem[cmd*='cut'],
  #placesContext_cut {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-cut.svg');
  }
  #context-delete,
  .customize-context-removeExtension,
  .unified-extensions-context-menu-remove-extension,
  .textbox-contextmenu menuitem[cmd*='delete'],
  menuitem[id='placesContext_deleteBookmark'],
  menuitem[id='placesContext_deleteFolder'],
  menuitem[id='placesContext_delete'],
  menuitem[id='placesContext_delete_history'],
  menuitem[id='placesContext_deleteHost'],
  #context_zenDeleteWebPanel,
  #context_zenDeleteWorkspace {
    --menu-image: url('chrome://browser/skin/zen-icons/edit-delete.svg');
  }
  #paste-and-go {
    --menu-image: url('chrome://browser/skin/zen-icons/paste-and-go.svg');
  }
  #context-print-selection {
    --menu-image: url('chrome://browser/skin/zen-icons/print.svg');
  }
  #context-take-screenshot {
    --menu-image: url('chrome://browser/skin/zen-icons/screenshot.svg');
  }
  #context-viewsource {
    --menu-image: url('chrome://browser/skin/zen-icons/source-code.svg');
  }
  #context-inspect-a11y {
    --menu-image: url('chrome://browser/skin/zen-icons/accessibility.svg');
  }
  #context-inspect {
    --menu-image: url('chrome://browser/skin/zen-icons/inspect.svg');
  }
  #context-searchselect {
    --menu-image: url('chrome://browser/skin/zen-icons/search-glass.svg');
  }
  #context-searchselect-private {
    --menu-image: url('chrome://browser/skin/privateBrowsing.svg');
  }
  #context-viewimage {
    --menu-image: url('chrome://browser/skin/zen-icons/image-open.svg');
  }
  #context-viewimageinfo {
    --menu-image: url('chrome://browser/skin/zen-icons/info.svg');
  }
  #context-saveimage,
  #context-video-saveimage {
    --menu-image: url('chrome://browser/skin/zen-icons/image-save.svg');
  }
  #context-savevideo {
    --menu-image: url('chrome://browser/skin/zen-icons/video-save.svg');
  }
  #context-viewvideo {
    --menu-image: url('chrome://browser/skin/zen-icons/video-open.svg');
  }
  #context-saveaudio {
    --menu-image: url('chrome://browser/skin/zen-icons/audio-save.svg');
  }
  #context-copyimage-contents {
    --menu-image: url('chrome://browser/skin/zen-icons/image-copy.svg');
  }
  #context-copyimage,
  #context-copyvideourl,
  #context-copylink,
  #context-stripOnShareLink,
  #context_zenOpenNewTabWebPanel,
  #context-pdfjs-copy {
    --menu-image: url('chrome://browser/skin/zen-icons/link.svg');
  }
  #placesContext_open,
  #context-openlinkincurrent {
    --menu-image: url('chrome://browser/skin/zen-icons/ext-link.svg');
  }
  #context-ask-chat {
    --menu-image: url('chrome://browser/skin/trending.svg');
  }
  #context-translate-selection {
    --menu-image: url('chrome://browser/skin/translations.svg');
  }
  #context-viewsource,
  #context-viewframesource,
  #context-viewpartialsource-selection {
    --menu-image: url('chrome://browser/skin/zen-icons/source-code.svg');
  }
  #context-sendimage,
  #context-sendvideo,
  #context-sendaudio {
    --menu-image: url('chrome://browser/skin/zen-icons/mail.svg');
  }
  #context-setDesktopBackground,
  .viewCustomizeToolbar {
    --menu-image: url('chrome://browser/skin/zen-icons/customize.svg');
  }
  #context-reloadimage,
  #context_reloadTab,
  #context_reloadSelectedTabs,
  #toolbar-context-reloadSelectedTab,
  #toolbar-context-reloadSelectedTabs,
  #context_zen-reset-pinned-tab {
    --menu-image: url('chrome://browser/skin/zen-icons/reload.svg');
  }
  #context-sendlinktodevice,
  #context_sendTabToDevice,
  #context-sendpagetodevice {
    --menu-image: url('chrome://browser/skin/zen-icons/send-to-device.svg');
  }
  #context-openlinkintab,
  #context-openlinkincontainertab,
  #context_zenWorkspacesOpenInContainerTab,
  #context_zenWebPanelContextInContainer,
  menuitem[id='placesContext_open:newtab'],
  menuitem[id='placesContext_openLinks:tabs'],
  menuitem[id='placesContext_openBookmarkLinks:tabs'],
  menuitem[id='placesContext_openBookmarkContainer:tabs'] {
    --menu-image: url('chrome://browser/skin/zen-icons/tab.svg');
  }
  #context_openANewTab,
  #toolbar-context-openANewTab {
    --menu-image: url('chrome://browser/skin/zen-icons/new-tab-image.svg');
  }
  #context-openlinkinusercontext-menu,
  menu[id='placesContext_open:newcontainertab'],
  menu[id='placesContext_openContainer:tabs'] {
    --menu-image: url('chrome://browser/skin/zen-icons/container-tab.svg');
  }
  #context-openlink,
  menuitem[id='placesContext_open:newwindow'] {
    --menu-image: url('chrome://browser/skin/zen-icons/window.svg');
  }
  #context-openlinkprivate,
  menuitem[id='placesContext_open:newprivatewindow'] {
    --menu-image: url('chrome://browser/skin/zen-icons/private-window.svg');
  }
  #context-savelink {
    --menu-image: url('chrome://browser/skin/zen-icons/downloads.svg');
  }
  #spell-add-to-dictionary {
    --menu-image: url('chrome://browser/skin/zen-icons/add-to-dictionary.svg');
  }
  #manage-saved-logins {
    --menu-image: url('chrome://browser/skin/zen-icons/passwords.svg');
  }
  #context-media-play,
  #context_playTab,
  #context_playSelectedTabs {
    --menu-image: url('chrome://browser/skin/zen-icons/media-play.svg');
  }
  #context-media-pause {
    --menu-image: url('chrome://browser/skin/zen-icons/media-pause.svg');
  }
  #context-media-mute,
  #context_toggleMuteTab,
  #context_toggleMuteSelectedTabs,
  #context_zenToggleMuteWebPanel {
    --menu-image: url('chrome://browser/skin/zen-icons/media-mute.svg');
  }
  #context-media-unmute,
  #context_toggleMuteTab[muted],
  #context_toggleMuteSelectedTabs[muted],
  #context_zenToggleMuteWebPanel[muted] {
    --menu-image: url('chrome://browser/skin/zen-icons/media-unmute.svg');
  }
  #context-media-playbackrate {
    --menu-image: url('chrome://browser/skin/zen-icons/media-speed.svg');
  }
  #context-video-fullscreen {
    --menu-image: url('chrome://browser/skin/zen-icons/fullscreen.svg');
  }
  #context-leave-dom-fullscreen,
  menuitem[contexttype='fullscreen'][label*='Exit'] {
    --menu-image: url('chrome://browser/skin/zen-icons/fullscreen-exit.svg');
  }
  #context-media-hidecontrols,
  #context-media-showcontrols {
    --menu-image: url('chrome://browser/skin/zen-icons/permissions.svg');
  }
  #context_pinTab,
  #context_unpinTab,
  #context_pinSelectedTabs,
  #context_unpinSelectedTabs,
  .customize-context-moveToPanel,
  #context_zen-replace-pinned-url-with-current {
    --menu-image: url('chrome://browser/skin/zen-icons/pin.svg');
  }
  #context_zen-add-essential {
    --menu-image: url('chrome://browser/skin/zen-icons/essential-add.svg');
  }
  #context_zen-remove-essential {
    --menu-image: url('chrome://browser/skin/zen-icons/essential-remove.svg');
  }
  .customize-context-removeFromToolbar {
    --menu-image: url('chrome://browser/skin/zen-icons/unpin.svg');
  }
  #zen-sidebar-web-panel-pinned[pinned='true'] {
    list-style-image: url('chrome://browser/skin/zen-icons/pin.svg') !important;
  }
  #zen-sidebar-web-panel-pinned {
    list-style-image: url('chrome://browser/skin/zen-icons/unpin.svg') !important;
  }
  #context_duplicateTab,
  #context_duplicateTabs,
  menuitem[data-l10n-id="zen-panel-ui-workspaces-create"] {
    --menu-image: url('chrome://browser/skin/zen-icons/duplicate-tab.svg');
  }
  #zen-context-menu-compact-mode {
    --menu-image: url('chrome://browser/skin/zen-icons/sidebar.svg');
  }
  #context_bookmarkTab,
  #context_bookmarkSelectedTabs,
  #toggle_PersonalToolbar,
  #context-bookmarklink,
  #toolbar-context-bookmarkSelectedTab,
  #toolbar-context-bookmarkSelectedTabs {
    --menu-image: url('chrome://browser/skin/zen-icons/bookmark-hollow.svg');
  }
  menuitem[id='placesContext_show_bookmark:info'],
  menuitem[id='placesContext_show_folder:info'],
  menuitem[id='placesContext_show:info'] {
    --menu-image: url('chrome://browser/skin/zen-icons/edit.svg');
  }
  menuitem[id='placesContext_showAllBookmarks'],
  #BMB_bookmarksShowAllTop,
  #BMB_bookmarksShowAll,
  .customize-context-manageExtension,
  .unified-extensions-context-menu-manage-extension {
    --menu-image: url('chrome://browser/skin/zen-icons/manage.svg');
  }
  #BMB_viewBookmarksSidebar {
    --menu-image: url('chrome://browser/skin/sidebars.svg');
  }
  #BMB_searchBookmarks {
    --menu-image: url('chrome://browser/skin/zen-icons/search-page.svg');
  }
  menuitem[id='placesContext_new:bookmark'],
  menuitem[id='placesContext_new:folder'],
  menuitem[id='placesContext_new:separator'],
  #context_zenEditWorkspace {
    --menu-image: url('chrome://browser/skin/zen-icons/plus.svg');
  }
  #context-savelinktopocket,
  #context-pocket {
    --menu-image: url('chrome://browser/skin/zen-icons/pocket-outline.svg');
  }
  #context_ungroupTab,
  #context_moveTabOptions,
  #context-zen-change-workspace-tab,
  #context_zenReorderWorkspaces {
    --menu-image: url('chrome://browser/skin/zen-icons/move-tab.svg');
  }
  .share-tab-url-item {
    --menu-image: url('chrome://browser/skin/zen-icons/share.svg');
  }
  #zen-context-menu-new-folder-toolbar,
  #zen-context-menu-new-folder {
    --menu-image: url('chrome://browser/skin/zen-icons/folder.svg');
  }
  #context_moveTabToNewGroup,
  #context_moveTabToGroup,
  #context_reopenInContainer {
    --menu-image: url('chrome://browser/skin/zen-icons/container-tab.svg');
  }
  #context_closeTab,
  #context_closeDuplicateTabs {
    --menu-image: url('chrome://browser/skin/zen-icons/close.svg');
  }
  #context_closeTabOptions {
    --menu-image: url('chrome://browser/skin/zen-icons/close-all.svg');
  }
  #context_unloadTab,
  #context_zenTabActions {
    --menu-image: url('chrome://browser/skin/zen-icons/close-all.svg');
  }
  .customize-context-reportExtension,
  .unified-extensions-context-menu-report-extension {
    --menu-image: url('chrome://browser/skin/zen-icons/report.svg');
  }
  .wordmark::after {
    content: 'Plus' !important;
  }
  #placesContext > menuitem[id="placesContext_sortBy:name"] {
    --menu-image: url('chrome://browser/skin/zen-icons/translations.svg');
  }
} 


/* PART 8: Improving the text margin one by one */
@media -moz-pref("uc.fixcontext.restoreicons") {
  /* 8A: Tab Context Menu */
  #tabContextMenu {
    menuitem:not(.menuitem-iconic) > .menu-text,
    menu > .menu-text {
      margin-inline-start: 24px!important;
    }
    #context_reopenInContainerPopupMenu,
    #context-zen-change-workspace-tab-menu-popup,
    #context_sendTabToDevicePopupMenu, #closeTabOptions, #moveTabOptionsMenu {
      menuitem:not(.menuitem-iconic) > .menu-text,
      menu > .menu-text {
        margin-inline-start: 0 !important;
      } 
    } 
  }
  /* 8B: Workspace Context Menu */
  #zenWorkspaceMoreActions {
    menuitem > .menu-text,
    menu > .menu-text {
      margin-inline-start: 24px !important;
    }
    #context_zenWorkspacesOpenInContainerTab > menupopup {
      menuitem > .menu-text,
      menu > .menu-text {
        margin-inline-start: 0 !important;
      } 
    }
  }
  /* 8C: Content Area Context Menu */
  #contentAreaContextMenu {
    menuitem:not(.menuitem-iconic,
      #context-undo, #context-redo, #context-cut, #context-copy,
      #context-paste, #context-delete
    ) > .menu-text,
    menu > .menu-text {
      margin-inline-start: 24px!important;
    }
    #context-ask-chat > menupopup,
    #context-sendpagetodevice-popup,
    #context-sendlinktodevice-popup
    {
      menuitem > .menu-text,
      menu > .menu-text {
        margin-inline-start: 0 !important;
      } 
    } 
  }
  /* 8D: Text Context Menu */
  .textbox-contextmenu {
    .menu-text {
      margin-inline-start: 24px !important;
    }
  }
  /* 8E: Bookmarks Context Menu */
  #placesContext {
    menuitem > .menu-text,
    menu > .menu-text {
      margin-inline-start: 0px !important;
    }
    #placesContext_open_newcontainertab_popup,
    #toggle_PersonalToolbar > menupopu {
      menuitem > .menu-text,
      menu > .menu-text {
        margin-inline-start: 0 !important;
      } 
    }
  }
}

/* Name: Quietify */
/* Description: quietify adds a calm visualizer type of animation to mute button to use with style and ease */
/* Author: @wysh3 */
@-moz-document url-prefix("chrome:") {
  /* ---- Volume Icon Theming ---- */
  /* edited from github.com/itsmefen/Dark-Harmony */
button [aria-label="Mute tab"]{
  display: none !important;
}
  .tabbrowser-tab img {
    transition: opacity 0.3s ease-in-out;
  }
  
  .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) img {
    opacity: 0 !important;
    transition: opacity 0.1s !important;
  }
  
  .tab-icon-overlay {  
   
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      display: block !important;
      border: 0px !important;
      border-radius: 0px !important;
      top: 0px !important;
      right: 0px !important;
      scale: 1.5 !important;
      opacity: 0.9 !important;
      margin: 0px 3px !important;
      background: light-dark(black,white) !important;
      /* svg modified from https://samherbert.net/svg-loaders/ */
      --play-svg: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%20135%20140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%22%3E%3Crect%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2230%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2260%22%20width%3D%2215%22%20height%3D%22140%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2290%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%22120%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3C%2Fsvg%3E');
      --mute-svg: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMzYgMTQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiPjxyZWN0IHg9IjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMzQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iNjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iOTQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMTI0IiB5PSI3MCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iNiIvPjwvc3ZnPg==');
      mask-size: 10px 10px !important;
      mask-repeat: no-repeat !important;
      mask-position: center !important;
    }
  
    @media (prefers-color-scheme: light) {
      &:is([soundplaying], [muted], [activemedia-blocked]) {
        filter: invert(1);
      }
    }
  
    &:is([activemedia-blocked]) {
      background: none !important;
      list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEb0lEQVR4nO2YW4hWVRTHP7URvM6ooWYa1kPlQ4GXxISyC4mUVg/RZQyjKLUsUcsmJRm8pqUgXSCRbhZCqT1mkARaWm+l9qK9jCKZ2KhUD4nWLxbuM/1ncfb3nfPNGaeH84cPPtZ/n7XX2pe1/3tXKiVKlChR4v8I4BZgFtCnB/q+AnjQYuiqo2bgby6htbAIs/e/KvRtMTxWr5PpwHn+w3uFR1o7hg+kf4vlnrwOrgHaxckp4Npuizgex3Wh7wS/AWOyftwH2C8f/wFM6Pao4/FMDDEk+BboneXDBXTGbMe/CvwKbOqGoFcCx4Hlzv64i2l+LUdXAmflg22Of9E5bCowif7O92LHfyLcGWBYNWerXePhwt0JXBT+G6BXUYmEPvaKf+trmnAj3CCvjDkZ5Bq2CDcwTHmCX4DRRSYR+hkNnJR+jgEDhH/FDfTANCdPukaDhXtNuL+AKe7Qmgc8kjNoKyrPAwuBBrHfGvpIsEa4wSG2BE+kOf5aGrwl9mGuarzhvtsqXOZkgOfku3cdt1G434Ghwr0t3B7vtNGt/8nCLXUzpU7nC5c+QvFEnnXfzhVuqFvmS4WbIvYLunIqQUslOKWbGDgk3GqxD3HTvE+XSGjTFxgXfn1TOPtGD7sm4dcId1DsvYHTwt2nTtcJ8anbfIrxkQrX7ipc/7A8zkkb+/860E/aDXeDsUq4Ca7vq4XbkbaHjNglRMdhZEJN7G1upn4W7mWXxHfEccAl0yLcEbH3cpXyUXcoJ9ihiRwU4qHIqOtM3Sh2U6YjIhs1hg3S/ipR2IYbhNtOyrkBPCz2HzURzfx2sW8T+2axPyD2Q27d63KK4awruT8Jd3+KjDd8KPZpYj+miZyJ7IPPI8tHK84XYrdNnRU68rvTdBSwROy7IvunPW8iLZGyuzuy5GrhevnuS7HP60oiurRuE/tHGZbW4R5eWm15N/tnkZG3jTpSOCuxtbBe2o8C/onM1PYMm/0HTWRnpPzanV0FnJbfo5Fl1y+U2Bj2u/K7rI7yuyJWftdGyuwYF8T4yLR7yW/JbHAyw/6vd0lEpTmXboaxA3FnmtowYmYViXI4okSb3L0+TaI0iERJ46pJlLVpZ0WQKNY2wb1eNJoAS9DxjmRl142qisa5btSeqdSnfg1PO8WtM/WScFPFbjEPqibj36wi4ze677YI15wjEbuLJNjiuE1VZPw7wn2V92K1zr0vTXUXq6dsM+a5+oZS/UKYmQY34ucjirvRzdScvFfdAa6CnMz8vtS1q26biVDhlwvXnnrVzfD4cIe7fH1f5OND2MQH3PpX3TfSHbattZ6DVK587PjFdEZjgYlY34pFjtfD0arWkLzVxD/Q2fSeUCleYDKbQ5DLnH1O7uoYXjfsWTKBVayJlR4CMAn4U+LZm+nJVE50/4g9ttujdrCHc/eIfVpP+EywJ3xXBjvV+ssB4H3p32K5q15HzVKpOp5kLheA1tD3RRWN9Tq7Cbi7sOjyl+QZwM090X+JEiVKlKjUwr/rwkME7dPwYwAAAABJRU5ErkJggg==") !important;
      width: 16px !important;
      height: 16px !important;
      margin: 0px 3px !important;
    }
  
    &:is([soundplaying]) {
      list-style-image: none !important;
      mask-image: var(--play-svg) !important;
    }
  
    &:is([muted]) {
      list-style-image: none !important;
      mask-image: var(--mute-svg) !important;
    }
  }
  @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
      .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover img {
          opacity: 1 !important;
          transition: opacity 0.1s ease-out !important;
      }
  
      .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover .tab-icon-overlay { 
          margin: 0px !important;
          transition: opacity 0.1s ease-out, transform 0.1s ease-out !important;
          transform: translate(6.9px, -6.9px) scale(0.69) !important;
      }
    }
  #zen-essentials-container {
    .tab-icon-overlay:is([soundplaying], [muted]) {
      margin: 0px !important;
    }
  
    .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) img {
      opacity: 0 !important;
    }
  }
  
}

/* Name: Tab Preview Enhanced */
/* Description: Enhanced tab preview, respecting user background color and padding */
/* Author: @Kaedriz */
@-moz-document url-prefix("chrome:") {
  #tab-preview-panel {
  	/* Matches Zen main background color, also supports gradients */
  	@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledBackgroundNative') {
  		--panel-background: var(--zen-main-browser-background-toolbar) !important;
  	}
  
  	/* Matches Zen panel radius */
  	@media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
  		border-radius: var(--panel-border-radius) !important;
  	}
  
  	/* Custom border radius for tab preview*/
  	@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
  		--panel-border-radius: var(
  			--zen-mods-TabPreviewEnhanced-borderRadiusAmount
  		) !important;
  	}
  
  	/* Removes border around tab preview */
  	--zen-appcontent-border: transparent !important;
  
  	/* Shifts panel to the slightly right */
  	/* TODO: Make customizable */
  	margin-left: 0.5em !important;
  }
  
  .tab-preview-thumbnail-container {
  	/* Fixes proper tab preview image sizing */
  	&:has(canvas) {
  		@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledMargins') {
  			/* Add padding around tab preview image */
  			padding: var(--zen-element-separation);
  		}
  
  		/* Hide border above preview */
  		border-top: none !important;
  
  		/* Hides padding between tab preview image and tab preview title */
  		padding-top: 0 !important;
  
  		/* Shrink preview to match added padding */
  		/* TODO: Make optional */
  		width: calc(var(--panel-width) - (var(--zen-element-separation) * 2)) px !important;
  		height: unset !important;
  
  		/* Some safety code to maintain aspect ratio */
  		aspect-ratio: 2 / 1 !important;
  	}
  
  	canvas {
  		/* Matches Zen panel radius */
  		@media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
  			border-radius: calc(var(--panel-border-radius) / 1.3) !important;
  		}
  
  		/* Custom border radius for tab preview image */
  		@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
  			border-radius: calc(
  				var(--zen-mods-TabPreviewEnhanced-borderRadiusAmount) / 1.3
  			) !important;
  		}
  	}
  }
  
}
/* Name: No Top Sites */
/* Description: Annoyed with top sites that appear when you open the URL bar? With this mod, you can now hide them! */
/* Author: @Ivaon */
#urlbar {
  @media -moz-pref("mod.ivaon.urlbar.hide_results", "0") {
    &:not([usertyping], [searchmode])>.urlbarView {
      display: none !important;
    }
  }
  #urlbar-results div.urlbarView-row[row-selectable][type="top_site"] {
    @media -moz-pref("mod.ivaon.urlbar.hide_results", "0"), -moz-pref("mod.ivaon.urlbar.hide_results", "1") {
      & {
        display: none !important;
      }
    }
    @media -moz-pref("mod.ivaon.urlbar.hide_results", "2") {
      &:not([pinned]) {
        display: none !important;
      }
    }
  }
}

/* Name: Custom Statusbar */
/* Description: This Mod allows you to adjust the rounding, margin, border thickness and any color of the statusbar. */
/* Author: @Archer7x */
@-moz-document url-prefix("chrome:") {
  #statuspanel {
    margin: var(--theme-customstatusbar-margin) !important;
  }
  
  #statuspanel-label {
    border-radius: var(--theme-customstatusbar-radius) !important;
    padding: 2px 10px !important;
    border: var(--theme-customstatusbar-border_thickness) solid
      var(--theme-customstatusbar-color_border) !important;
    background: var(--theme-customstatusbar-color_background) !important;
    color: var(--theme-customstatusbar-text_color) !important; /* Text color */
  }
  
}
/* Name: Better Find Bar */
/* Description: Improves the find bar, making it floating with theme match and customization. */
/* Author: @RobotoSkunk */

:root {
	--better-findbar-transform-translateY: 150px;
	--better-findbar-transform-translateX: -50%;
	--better-findbar-position-top: auto;
	--better-findbar-position-bottom: 15px;
	--better-findbar-position-left: 50%;
	--better-findbar-position-right: auto;
	--better-findbar-background-color: var(--zen-primary-color);
}

/* Custom background */
@media (-moz-bool-pref: "theme-better_find_bar-enable_custom_background") {
	:root {
		--better-findbar-background-color: var(--theme-better_find_bar-custom_background);
	}
}

findbar {
	display: flex !important;

	border-radius: var(--zen-border-radius) !important;
	margin: 0px !important;

	width: 90% !important;
	max-width: calc(var(--theme-better_find_bar-textbox_width) * 1px); 

	height: auto !important;

	position: absolute !important;
	top: var(--better-findbar-position-top);
	bottom: var(--better-findbar-position-bottom);
	left: var(--better-findbar-position-left);
	right: var(--better-findbar-position-right);
	transform: translateX(var(--better-findbar-transform-translateX)) translateY(0);

	overflow: unset !important;
	box-shadow: var(--box-shadow-10);

	background: var(--better-findbar-background-color) !important;
	border: 1px solid var(--input-border-color) !important;

	transition: transform 0.35s ease !important;

	visibility: visible !important;
	opacity: 1 !important;

	& .findbar-container {
		flex-wrap: wrap;
		overflow-x: auto !important;
		height: auto !important;

		row-gap: 10px;

		& > :first-child {
			width: 100% !important;
		}

		& .findbar-textbox {
			flex-grow: 1;
		}
	}

	&[hidden] {
		transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
	}

	@starting-style {
		transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
	}
}

/* Disable animations */
@media (-moz-bool-pref: "theme.better_find_bar.instant_animations") {
	findbar, findbar .findbar-container {
		transition: initial !important;
	}
}

/* Horizontal Position */
body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="left"]
	) {
	--better-findbar-transform-translateX: 0%;
	--better-findbar-position-left: 15px;
	--better-findbar-position-right: auto;
}

body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="right"]
	) {
	--better-findbar-transform-translateX: 0%;
	--better-findbar-position-left: auto;
	--better-findbar-position-right: 15px;
}

/* Vertical Position */
body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-vertical_position="top"]
	) {
	--better-findbar-transform-translateY: -150px;
	--better-findbar-position-bottom: auto;
	--better-findbar-position-top: 15px;
}


/* Background blur */
@media (-moz-bool-pref: "theme.better_find_bar.transparent_background") {
	findbar,
	findbar .findbar-textbox:not([status="notfound"]) {
		backdrop-filter: blur(8px);

		background: color-mix(in hsl, var(--better-findbar-background-color), transparent 10%) !important;
	}
}

/* Hide highlight checkbox */
body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_highlight="hide_immediately"]
	) {
	findbar .findbar-highlight {
		display: none !important;
	}
}

body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_highlight="hide_on_disable"]
	) {
	findbar checkbox.findbar-highlight:not([checked]) {
		display: none !important;
	}
}

/* Hide match case checkbox */
body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_match_case="hide_immediately"]
	) {
	findbar .findbar-case-sensitive {
		display: none !important;
	}
}

body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_match_case="hide_on_disable"]
	) {
	findbar checkbox.findbar-case-sensitive:not([checked]) {
		display: none !important;
	}
}

/* Hide match diacritics checkbox */
body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_match_diacritics="hide_immediately"]
	) {
	findbar .findbar-match-diacritics {
		display: none !important;
	}
}

body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_match_diacritics="hide_on_disable"]
	) {
	findbar checkbox.findbar-match-diacritics:not([checked]) {
		display: none !important;
	}
}

/* Hide whole words checkbox */
body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_whole_words="hide_immediately"]
	) {
	findbar .findbar-entire-word {
		display: none !important;
	}
}

body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-hide_whole_words="hide_on_disable"]
	) {
	findbar .findbar-entire-word:not([checked]) {
		display: none !important;
	}
}

/* Hide find status label */
@media (-moz-bool-pref: "theme.better_find_bar.hide_find_status") {
	findbar .findbar-find-status {
		display: none !important;
	}
}

/* Hide found matches label */
@media (-moz-bool-pref: "theme.better_find_bar.hide_found_matches") {
	findbar .findbar-label.found-matches {
		display: none !important;
	}
}

/* End of Zen Mods */