/* Increase size of pinned tabs */
@media (-moz-bool-pref: "zen.tabs.vertical") {
  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
    .scrollbox-clip > scrollbox {
      grid-template-columns: repeat(auto-fill, minmax(calc(var(--tab-min-height) * 1.9), 1fr)) !important;
      column-gap: 10px;
    }
    .tabbrowser-tab[pinned] {
      margin-top: 5px !important;
      margin-bottom: 5px !important;
    }
  }
}

/* COLORS of pinned tabs*/

/* background color of pinned tabs in a normal state (not hovered/selected) */
.tabbrowser-tab[pinned] {
  background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 30%) !important;
  border-radius: 8px !important;
}

/* background color when hovering */
.tabbrowser-tab[pinned]:hover {
  background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 20%) !important;
}

/* background color when selected */
.tabbrowser-tab[pinned][selected="true"] {
  background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 0%) !important;
}

/* background color when hovering and selected */
.tabbrowser-tab[pinned][selected="true"]:hover {
  background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), #ffffff 5%) !important;
}

/* Align tab bar with nav bar when not in compact mode when toggled on */
@media not (-moz-bool-pref: "zen.view.compact"){
  @media (-moz-bool-pref: "uc.tab-bar.align-with-navbar") {
    #TabsToolbar {
      padding-top: 0 !important;
    }
  }
}

/* Remove the border of the workspace button if enabled when toggled on */
@media (-moz-bool-pref: "uc.workspace-button.remove-border"){
  #zen-workspaces-button {
    border: hidden !important;
  }
}

/* Move workspace button to the bottom if enabled when toggled on */
@media (-moz-bool-pref: "uc.workspace-button.move-to-bottom"){
  #zen-workspaces-button {
    order: 1;
    margin-bottom: auto !important;
  }
  @media (-moz-bool-pref: "zen.tabs.vertical") {
    @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
      .tabbrowser-tab[pinned] {
        margin-top: 0px !important;
        margin-bottom: 10px !important;
      }
    }
  }
}

/* Hide seperator line above first normal tab when toggled on */
@media (-moz-bool-pref: "uc.hide-seperator-line") {
  #tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of [fadein]:not([pinned]):not([hidden])) {
	  margin-top: 10px !important;
	  overflow: hidden !important;
  }
}