:root {
  --ezuitb-darken-background: rgba(0, 0, 0, 0.1);
  --ezuitb-darken-background-hover: rgba(0, 0, 0, 0.18);
  --ezuitb-tab-background-hover: rgba(0, 0, 0, 0.1);
  --ezuitb-url-bar-background: rgba(0, 0, 0, 0.08);
  --ezuitb-floating-url-bar-background: rgba(255, 255, 255, 0.8);
  --ezuitb-new-tab-button-text-color: rgba(0, 0, 0, 0.5);
  --ezuitb-tab-background-active: #ffffff;
  --ezuitb-tab-background-active-shadow: 2px 2px 2px rgba(0, 0, 0, 0.14),
    -1px -1px 1px rgba(0, 0, 0, 0.1);
  --ezuitb-popup-background: #ffffffff;
  --ezuitb-background-gradient-start: #fac4ca;
  --ezuitb-background-gradient-end: #e9fac1;
  --ezuitb-background-gradient-angle: 140deg;
  --ezuitb-border-color: #00000028;
  --ezuitb-attention-color: #e06271;
  --ezuitb-page-canvas-spacing: calc(var(--zen-element-separation) * 1.2);
  --ezuitb-element-half-separation: calc(var(--zen-element-separation) / 2);
  --ezuitb-element-three-quarters-separation: calc(
    var(--zen-element-separation) * 0.75
  );
  --ezuitb-web-page-canvas-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2),
    -1px -1px 3px rgba(0, 0, 0, 0.08);
  --ezuitb-web-page-canvas-shadow-active: 2px 2px 3px rgba(0, 0, 0, 0.3),
    -1px -1px 3px rgba(0, 0, 0, 0.2);
  --ezuitb-floating-url-bar-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8),
    1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Exit Button Padding Right */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.exit-button-padding-right.enabled") {
  .titlebar-buttonbox-container {
    padding-right: var(--zen-element-separation);
  }
}

/* Fun colors */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.fun-colors.enabled") {
  :root {
    /* --zen-colors-primary: black !important; */
    --zen-colors-secondary: var(--ezuitb-darken-background) !important;
    --zen-colors-tertiary: linear-gradient(
      var(--ezuitb-background-gradient-angle),
      var(--ezuitb-background-gradient-start),
      var(--ezuitb-background-gradient-end)
    ) !important;
    --zen-colors-border: var(--ezuitb-border-color) !important;
    --zen-dialog-background: var(--ezuitb-popup-background) !important;
    /*     --toolbarbutton-hover-background: var(
        --ezuitb-darken-background-hover
      ) !important; */
    --toolbarbutton-icon-fill-attention: var(
      --ezuitb-attention-color
    ) !important;
  }

#commonDialogWindow {
    background-color: var(--ezuitb-popup-background) !important;
  }
}

/* Removing tab-bar top padding */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.tab-bar-top-padding.enabled") {
  #TabsToolbar {
    padding-top: 0 !important;
  }
}

/* Web-page canvas shadow */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.page-canvas-shadows.enabled") {
  #tabbrowser-tabpanels {
    grid-gap: var(--ezuitb-page-canvas-spacing) !important;
    padding-right: var(--ezuitb-page-canvas-spacing) !important;
    padding-bottom: var(--ezuitb-page-canvas-spacing) !important;

& .browserSidebarContainer {
      box-shadow: var(--ezuitb-web-page-canvas-shadow) !important;

margin: 0 !important;

/* Darken active canvas when split */
      &[zen-split-active="true"] {
        box-shadow: var(--ezuitb-web-page-canvas-shadow-active) !important;
      }
    }
  }
}

/* URL Bar remove border */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.remove-url-bar-border.enabled") {
  #urlbar {
    border: 0 !important;
  }
}

@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.url-bar-tweaks.enabled") {
  /* URL Bar buttons hover */
  .urlbar-input-container {
    &
      > *:not(.urlbar-input-box):not(#page-action-buttons):not(
        #identity-box
      ):hover,
    .urlbar-page-action:hover {
      background-color: var(--ezuitb-darken-background-hover) !important;
    }
  }

/* URL Bar black transparent background */

#urlbar-background {
    background-color: var(--ezuitb-url-bar-background) !important;
  }

/* SSL icon background */
  #identity-icon-box {
    background-color: var(--ezuitb-darken-background) !important;
  }
}

/* Floating URL Bar tweaks */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.floating-url-bar-tweaks.enabled") {
  #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
    #urlbar-background {
      background-color: var(--ezuitb-floating-url-bar-background) !important;
    }

box-shadow: var(--ezuitb-floating-url-bar-shadow) !important;
  }

/* Floating URL Bar item hover */
  .urlbarView-row:hover {
    background-color: var(--ezuitb-darken-background) !important;
  }
}

/* New Tab Button with text */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.new-tab-button-text.enabled") {
  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
    #tabs-newtab-button {
      display: flex;
      flex-direction: row !important;
      justify-content: flex-start !important;
      &:after {
        content: "New Tab";
        flex: 1;
        color: var(--ezuitb-new-tab-button-text-color);
      }
    }
  }
}

/* New tab separator when no unpinned tabs */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.new-tab-separator-when-no-unpinned-tabs.enabled") {
  .tabbrowser-tab[pinned]
    + #tabbrowser-arrowscrollbox-periphery
    > #tabs-newtab-button {
    margin-top: calc(var(--zen-element-separation) * 2) !important;
    position: relative;
  }

/* The separator */
  .tabbrowser-tab[pinned]
    + #tabbrowser-arrowscrollbox-periphery
    > #tabs-newtab-button::before {
    content: "";
    position: absolute;
    top: calc(var(--zen-element-separation) * -1);
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 1px;
    background: var(--zen-colors-border);
  }
}

/* Pinned tabs grid layout */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.pinned-tabs-layout.enabled") {
  .scrollbox-clip > scrollbox {
    grid-template-columns: repeat(
      auto-fill,
      minmax(calc(var(--tab-min-height) * 1.2), 1fr)
    ) !important;
    gap: 5px;
  }
  .tabbrowser-tab[pinned] {
    background-color: var(--ezuitb-darken-background) !important;
    border-radius: 8px !important;
    cursor: pointer;
    .tab-icon-stack {
      opacity: 1 !important;
    }
    .tab-icon-image {
      opacity: 1 !important;
    }
  }
  .tabbrowser-tab[pinned]:hover {
    background-color: var(--ezuitb-darken-background-hover) !important;
  }

.tabbrowser-tab[pinned][selected="true"],
  .tabbrowser-tab[pinned][multiselected="true"] {
    background-color: var(--ezuitb-tab-background-active) !important;
    box-shadow: var(--ezuitb-tab-background-active-shadow) !important;
  }
}

/* Zen workspace button */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.workspace-button-tweaks.enabled") {
  #zen-workspaces-button {
    background-color: var(--ezuitb-darken-background) !important;
    border-radius: 8px !important;
    cursor: pointer;
    box-sizing: border-box;
    height: 34px !important;
    border-width: 0 !important;
    aspect-ratio: 1 / 1;
  }

/* Zen workspace button - Hover */
  #zen-workspaces-button:hover {
    background-color: var(--ezuitb-darken-background-hover) !important;
  }

/* Zen workspace button - space from tabs when collapsed */
  @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
    #zen-workspaces-button {
      margin-bottom: var(--zen-element-separation) !important;
    }
  }

/* Zen workspace button - width when expanded */
  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
    #zen-workspaces-button {
      width: calc(
        100% - var(--ezuitb-element-three-quarters-separation)
      ) !important;
      margin-left: var(--ezuitb-element-half-separation) !important;
    }
  }
}

/*Toolbar Button Tweaks*/
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.toolbar-button-tweaks.enabled") {
  #zen-profile-button:hover,
  .toolbarbutton-1:hover > .toolbarbutton-icon,
  .toolbarbutton-1:hover > .toolbarbutton-badge-stack {
    background-color: var(--ezuitb-darken-background-hover) !important;
  }

#tabs-newtab-button:hover > .toolbarbutton-icon {
    background-color: transparent !important;
  }
}

/* Tab tweaks */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.tab-button-tweaks.enabled") {
  .tabbrowser-tab:not([pinned]):not([selected="true"]):hover,
  #tabs-newtab-button:hover {
    background-color: var(--ezuitb-tab-background-hover) !important;
  }

/* Tab - Selected */
  .tabbrowser-tab:not([pinned])[selected="true"],
  .tabbrowser-tab:not([pinned])[multiselected="true"] {
    background-color: var(--ezuitb-tab-background-active) !important;
    box-shadow: var(--ezuitb-tab-background-active-shadow) !important;
  }
}