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

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

  #browser {
    --zen-toolbox-padding: 5px;
    --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;

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

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


  #TabsToolbar-customization-target {
    gap: var(--zen-toolbox-padding);
  }

  #tabbrowser-tabs {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    grid-gap: 2px !important;

    border-bottom: 1px solid var(--zen-colors-border) !important;

    --tab-block-margin: 2px;

    & .tabbrowser-tab {
      max-width: unset !important;
      padding: 0 !important;

      & .tab-background {
        overflow: hidden;

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

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

    & toolbarbutton {
      width: fit-content;
    }
  }

  #newtab-button-container {
    margin-inline-end: 0 !important;
    padding-top: 0 !important;
    border-top: solid transparent 0px !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%;
      }
    }
  }

  #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,
    #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: calc(100% - var(--zen-toolbox-padding));
      position: relative;
    }

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

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

    & #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;
        }
      }
    }

    @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;
      }
    }
  }

  /* 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,
    #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);
    }

    :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;
          }
        }
      }
    }
  }

  /* 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;
    }

    #navigator-toolbox,
    #titlebar,
    #TabsToolbar {
      transition: 0s !important;
    }

    #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],
    #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: 3.4rem !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.2s ease-in-out;
      }

      &[zen-right-side='true'] #TabsToolbar {
        animation: zen-sidebar-panel-animation-right 0.2s 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;
    }
  }
}