@media (-moz-bool-pref: 'zen.tabs.vertical') {

  #tabbrowser-tabs,
  #TabsToolbar,
  #titlebar,
  #TabsToolbar-customization-target {
    flex-direction: column;
    height: 100%;
  }

  #private-browsing-indicator-with-label {
    display: none !important;
  }

  #browser {
    --zen-toolbox-padding: 5px;

    :root:not([zen-sidebar-legacy='true']) & {
      --zen-toolbox-top-align: var(--zen-toolbox-padding);
    }
  }

  #navigator-toolbox {
    --border-radius-medium: 8px;
    --tab-border-radius: var(--border-radius-medium);
    --zen-toolbox-min-width: 1px;

    --tab-hover-background-color: var(--toolbarbutton-hover-background) !important;

    min-width: var(--zen-toolbox-min-width);

    padding: var(--zen-toolbox-padding);
    padding-top: var(--zen-toolbox-top-align);

    margin-top: 0 !important;
    display: flex;
  }


  #TabsToolbar-customization-target {
    position: relative;
    gap: var(--zen-toolbox-padding);
    &::after {
      content: '';
      display: block;
      height: 1px;
      background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
      margin: 0 auto;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      bottom: calc(-1 * var(--zen-toolbox-padding));
    }
  }

  #tabbrowser-tabs {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;

    position: relative;
    border-bottom: 0px solid transparent !important;

    --tab-block-margin: 2px;
    grid-gap: 0 !important;

    & .tabbrowser-tab {
      animation: zen-slide-in 0.2s;

      max-width: unset !important;
      padding: 0 !important;

      font-size: var(--urlbarView-small-font-size);

      position: relative;

      height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
      min-height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;

      border-radius: var(--border-radius-medium);

      & .tab-background {
        overflow: hidden;

        & .tab-context-line {
          margin: 0 0px !important;
          width: 3px !important;
        }
      }

      @media (-moz-bool-pref: 'zen.tabs.dim-pending') { 
        &[pending='true'] .tab-icon-image {
          opacity: 0.5;
        }
      }
    }
  }

  #zen-sidebar-icons-wrapper {
    background: transparent;

    & toolbarbutton {
      width: fit-content;
      padding: 0 !important;
    }
  }

  #newtab-button-container {
    margin-inline-end: 0 !important;
    padding-top: 0 !important;
    border-top: solid transparent 0px !important;
    margin: 0 2px !important;

    &[showborder] {
      padding-top: 4px !important;

      &::before {
        content: '';
        display: block;
        height: 1px;
        background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
        margin: 0 auto;
        margin-block-end: 4px;
        width: 80%;
      }
    }
  }

  #tabbrowser-arrowscrollbox {
    &::part(scrollbox) {
      gap: 0px !important;
    }
  }

  #vertical-pinned-tabs-container {
    padding-inline-end: 0 !important;
    gap: 3px !important;
    max-height: unset !important;
    overflow: visible !important;

    & .tab-background:not(:hover):not([selected]):not([multiselected]) {
      background: color-mix(in srgb, var(--zen-colors-secondary) 20%, transparent 80%) !important;
    }

    & .tabbrowser-tab .tab-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  /* Mark: toolbox as expanded */
  #navigator-toolbox:is(
    #navigator-toolbox[zen-user-hover='true']:hover,
    #navigator-toolbox[zen-user-hover='true']:focus-within,
    #navigator-toolbox[zen-user-hover='true'][movingtab],
    #navigator-toolbox[zen-user-hover='true'][flash-popup],
    #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
    #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
    #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
    #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
    --zen-toolbox-min-width: 150px;

    & #zen-sidebar-icons-wrapper {
      display: grid;
      /* Make sure the icons take most of the space, smartly */
      grid-template-columns: repeat(auto-fit, minmax(34px, auto));
      gap: 4px;
      justify-content: space-between;

      padding-top: calc(var(--zen-toolbox-padding) * 2);

      width: 100%;
      position: relative;

      --toolbarbutton-inner-padding: 9px !important;

      justify-content: space-between;
    }

    /* Mark: Fix separator paddings */
    &[zen-right-side='true'] {
      padding-left: 0 !important;
    }

    &:not([zen-right-side='true']) {
      padding-right: 0 !important;
    }

    & #TabsToolbar-customization-target {
      &::after {
        width: 98%;
        bottom: calc(-0.5 * var(--zen-toolbox-padding));
      }
    }

    & #newtab-button-container {
      &::before {
        width: 100%;
        margin-block-end: calc(var(--zen-toolbox-padding) + 2px);
      }

      & #vertical-tabs-newtab-button {
        padding: 0 !important;

        & label {
          display: flex;
          text-align: start;
          align-items: center;
          padding: 0;
        }
  
        &:hover * {
          background: transparent !important;
        }
      }
    }

    & #tabbrowser-tabs {
      & .tabbrowser-tab {
        & .tab-background {
          @media not (prefers-color-scheme: dark) {
            box-shadow: none !important;
          }
        }

        &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
          display: block !important;
        }

        .tab-throbber,
        .tab-icon-pending,
        .tab-icon-image,
        .tab-sharing-icon-overlay,
        .tab-icon-overlay {
          &:not([pinned]) {
            margin-inline-end: var(--toolbarbutton-inner-padding) !important;
            margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;    
          }
        }
      }
    }

    @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
      :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
        padding-right: 47px !important;
      }
      
      & #zen-profile-button {
        width: 100% !important;
        padding: var(--toolbarbutton-inner-padding) !important;
  
        & label {
          padding-left: calc(var(--toolbarbutton-inner-padding) * 1.5);
        }
      }
    }
  }

  /* Mark: toolbox as collapsed */
  #navigator-toolbox:not(#navigator-toolbox:is(
    #navigator-toolbox[zen-user-hover='true']:hover,
    #navigator-toolbox[zen-user-hover='true']:focus-within,
    #navigator-toolbox[zen-user-hover='true'][movingtab],
    #navigator-toolbox[zen-user-hover='true'][flash-popup],
    #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
    #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
    #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
    #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
    --zen-toolbox-max-width: 50px;
    max-width: var(--zen-toolbox-max-width) !important;

    #vertical-tabs-newtab-button {
      padding: 0 !important;
      background: transparent !important;
    }

    & #zen-sidebar-icons-wrapper {
      display: flex;
      flex-direction: column;
      padding-top: calc(var(--zen-toolbox-padding) * 2);
      align-items: center;
    }

    :root:has(&) #zen-sidebar-splitter {
      display: none !important;
    }

    & #tabbrowser-tabs {
      --tab-min-width: 36px !important;

      & .tabbrowser-tab {
        margin: 0 auto;
        width: var(--tab-min-width) !important;
        height: var(--tab-min-width) !important;

        & .tab-content {
          display: flex;
          align-content: center;
          justify-content: center;

          & .tab-label-container {
            display: none;
          }

          & .tab-icon-image,
          & .tab-icon-pending {
            margin-inline-end: 0 !important;
          }
        }
      }

      #vertical-pinned-tabs-container {
        display: flex;
        flex-direction: column;
        gap: 0 !important;
      }

      @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
        & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
          display: none !important;
        
          :is(
            :root[uidensity=compact],
            #tabbrowser-tabs[secondarytext-unsupported],
            :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
          ) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
          :root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
            opacity: 1 !important;
          }
        }
      }

      & .tab-throbber, & .tab-icon-pending, & .tab-icon-image, & .tab-sharing-icon-overlay, & .tab-icon-overlay {
        margin-inline-end: 0 !important;
      }
    }
  }

  /* Mark: Separator styling */
  #zen-sidebar-splitter {
    opacity: 0;
    width: var(--zen-toolbox-padding);
    height: 100%;
  }

  /* Mark: Expand on hover */
  @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) {
    #zen-sidebar-splitter {
      display: none !important;
    }

    #navigator-toolbox {
      z-index: 1;
    }

    #TabsToolbar {
      --hovered-verticaltab-width: 20em;

      z-index: 1;
      background-repeat: no-repeat !important;
      background-position: center center !important;
      background-size: cover !important;

      border-top: 1px solid transparent;
      border-right: 1px solid transparent;

      height: 100%;

      border-top-right-radius: var(--zen-border-radius);
    }

    #navigator-toolbox:hover,
    #navigator-toolbox:focus-within,
    #navigator-toolbox[movingtab],
    #navigator-toolbox[flash-popup],
    #navigator-toolbox[has-popup-menu],
    #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
    #navigator-toolbox:has(.tabbrowser-tab:active),
    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
      --zen-navigation-toolbar-min-width: 50px !important;

      max-width: var(--zen-navigation-toolbar-min-width) !important;
      min-width: var(--zen-navigation-toolbar-min-width) !important;
      padding: 0 !important;

      & #TabsToolbar {
        z-index: 100 !important;
        width: 250px !important;
        background-color: var(--zen-dialog-background);
        border-top-color: var(--zen-colors-border);
        border-right-color: var(--zen-colors-border);
        position: absolute;
        padding: var(--zen-toolbox-padding);
        transition: 0 !important;
        animation: zen-vtabs-animation 0.3s ease-in-out;
        -moz-window-dragging: no-drag;
      }

      &[zen-right-side='true'] #TabsToolbar {
        animation: zen-sidebar-panel-animation-right 0.3s ease-in-out;

        right: 0;
        border-right: 0;
        border-left: 1px solid var(--zen-colors-border);
        border-top-left-radius: var(--zen-border-radius);
        border-top-right-radius: 0;
      }

      #navigator-toolbox:not(&)
        #TabsToolbar
        #tabbrowser-tabs[closebuttons='activetab']
        .tabbrowser-tab
        .tab-content[class]
        > .tab-close-button[class] {
        display: none !important;
        visibility: hidden !important;
      }

      & #zen-sidebar-icons-wrapper {
        display: block !important;
      }

      & .zen-sidebar-action-button {
        width: 100%;
        border-radius: var(--zen-button-border-radius);

        &:hover {
          background: var(--button-hover-bgcolor);
        }

        & > *,
        &:hover > * {
          background: transparent !important;
          --toolbarbutton-active-background: transparent;
        }

        & label:not(.toolbarbutton-badge) {
          --toolbarbutton-hover-background: transparent;
          display: block !important;
          text-align: start;
        }
      }
    }
  }

  /* Mark: Move sidebar to the right */
  #browser:has(#navigator-toolbox[zen-right-side='true']) {
    & #navigator-toolbox {
      order: 3;
    }

    & #zen-sidebar-splitter {
      order: 2;
    }
  }

  /* Mark: Override the default tab close button */
  #tabbrowser-tabs {
    & .tabbrowser-tab {
      &[pinned] .tab-close-button {
        display: none !important;
      }

      &[selected] .tab-background {
        background: var(--zen-colors-secondary) !important;
      }
    }
  }

  /* Customization mode */
  :root[customizing] #navigator-toolbox {
    overflow: hidden;
    max-width: 0 !important;
    margin-right: var(--zen-element-separation);
    padding: 0 !important;
    opacity: 0;
  }
}