@media (-moz-bool-pref: 'zen.tabs.vertical') {
  #tabbrowser-tabs,
  #TabsToolbar,
  #titlebar,
  #TabsToolbar-customization-target {
    flex-direction: column;
    height: 100%;
  }

  #TabsToolbar > * {
    justify-content: center;
  }

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

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

  #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);
    margin-top: 0 !important; /* Fix full screen mode */

    padding-top: var(--zen-toolbox-top-align);
    padding-bottom: var(--zen-element-separation) !important;

    order: 0 !important;

    display: flex;
  }

  .titlebar-spacer[type='pre-tabs'],
  .titlebar-spacer[type='post-tabs'] {
    display: none;
  }

  #TabsToolbar-customization-target {
    position: relative;
    gap: 0;
    &::after {
      content: '';
      display: block;
      height: 1px;
      
      margin: 0 auto;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      bottom: calc(-1 * var(--zen-toolbox-padding));
    }


    @media (-moz-bool-pref: 'zen.view.show-bottom-border') {
      &::after {
        background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
      }
    }

    & > * {
      border-top-width: 0 !important;
    }
  }

  #vertical-tabs-newtab-button {
    &:hover,
    &:not(:is(:hover, :active)) .toolbarbutton-icon {
      background: transparent !important;
    }
  }

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

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

    --tab-block-margin: 2px;
    --tab-selected-bgcolor: var(--zen-colors-primary);
    grid-gap: 0 !important;

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

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

      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;

        &:is([selected], [multiselected]) {
          @media not (prefers-color-scheme: dark) {
            border: 1px solid color-mix(in srgb, var(--zen-colors-primary) 60%, transparent 40%) !important;
          }
        }

        & .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;
    padding: 0;
    gap: 5px;
    align-items: center;

    & > toolbarbutton:not(#zen-workspaces-button) {
      padding: 0 !important;
    }
  }

  #newtab-button-container {
    display: none !important;
  }

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

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

    & .tab-background:not(:hover):not([selected]):not([multiselected]) {
      --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 10%, transparent 90%);
      @media not (prefers-color-scheme: dark) {
        --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%);
      }
      background: var(--zen-pinned-tabs-bgcolor) !important;
      backdrop-filter: blur(5px);
    }

    & .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'][zen-has-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],
      #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: fit-content;
    padding: var(--zen-toolbox-padding);
    padding-top: 0;

    & #titlebar {
      min-width: 150px;
    }

    & #zen-workspaces-button {
      margin-left: 2px;
      margin-right: 2px;

      & .zen-workspace-sidebar-icon[no-icon='true'] {
        display: none;
      }
    }

    & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
      margin-bottom: 12px;
      position: relative;

      &::after {
        bottom: -6px;
        content: '';
        display: block;
        height: 1px;
        background: color-mix(in srgb, var(--zen-colors-border) 80%, transparent 20%);
        width: 99%;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
      }
    }

    & #zen-sidebar-icons-wrapper {
      display: flex;
      /* Make sure the icons take most of the space, smartly */
      flex-direction: row;
      justify-content: space-between;

      padding-top: var(--zen-element-separation);

      width: 100%;
      position: relative;

      --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
    }

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

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

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

      & > *:not(tabs):not(#search-container) {
        width: 100%;
        border-radius: var(--tab-border-radius);

        padding-left: var(--toolbarbutton-inner-padding);
        padding-right: var(--toolbarbutton-inner-padding);

        & label {
          display: flex;
          width: 0;
        }

        & image {
          height: 16px;
          width: 16px;
          padding: 0 !important;
        }

        &:is([open], [checked]) {
          background: var(--toolbarbutton-active-background) !important;

          & image,
          label {
            background: transparent !important;
          }
        }

        &:hover {
          background: var(--toolbarbutton-hover-background) !important;

          & image,
          label {
            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;
          }
        }
      }
    }
  }

  /* Mark: toolbox as collapsed */
  #navigator-toolbox:not(
      #navigator-toolbox:is(
          #navigator-toolbox[zen-user-hover='true'][zen-has-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],
          #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'])
        )
    ) {
    /* Important: When changin this value, make sure expand on hover doesn't break! */
    --zen-toolbox-max-width: 49px; /* 1px more because the browser view has one pixel of padding to avoid the border being cut off */
    --zen-toolbox-padding: 8px;
    max-width: var(--zen-toolbox-max-width) !important;
    min-width: var(--zen-toolbox-max-width) !important;

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

    :root[customizing] & #zen-sidebar-icons-wrapper {
      min-width: unset !important;
    }

    & #zen-sidebar-icons-wrapper {
      display: flex;
      flex-direction: column;
      padding-top: var(--zen-element-separation);
      align-items: center;
    }

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

    & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
      margin-bottom: 12px;
      position: relative;

      &::after {
        bottom: -6px;
        content: '';
        display: block;
        height: 1px;
        background: color-mix(in srgb, var(--zen-colors-border) 80%, transparent 20%);
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
      }
    }

    & #zen-workspaces-button[as-button='true']::after {
      content: '';
      display: block;
      height: 80%;
      width: 3px;
      background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%);
      position: absolute;
      left: calc(-1 * var(--zen-toolbox-padding) - 1px);
      top: 50%;
      transform: translateY(-50%);
      border-top-right-radius: var(--zen-border-radius);
      border-bottom-right-radius: var(--zen-border-radius);
    }

    &[zen-right-side='true'] #zen-workspaces-button[as-button='true']::after {
      left: unset;
      right: calc(-1 * var(--zen-toolbox-padding) - 1px);

      border-top-left-radius: var(--zen-border-radius);
      border-bottom-left-radius: var(--zen-border-radius);

      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & #TabsToolbar-customization-target {
      padding-bottom: var(--zen-toolbox-padding);

      &::after {
        bottom: -1px !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-background:is([selected], [multiselected]) {
          @media not (prefers-color-scheme: dark) {
            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) !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;
      }
    }

    & #zen-workspaces-button {
      flex-direction: column;

      &:not([as-button='true']) {
        & toolbarbutton {
          &[active='true']::after {
            bottom: 50% !important;
            transform: translateY(50%) !important;
          }

          :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
            left: -2px;
            animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important;
          }

          :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
            left: unset !important;
            right: -2px;
            animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !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') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) {
    #zen-sidebar-splitter {
      display: none !important;
    }

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

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

      border-top: 1px solid transparent;

      height: 100%;

      border-top-right-radius: var(--zen-border-radius);
      width: var(--zen-toolbox-max-width);

      & .tabbrowser-tab {
        transition: 0s !important;
      }
    }

    #navigator-toolbox[zen-has-hover],
    #navigator-toolbox:focus-within,
    #navigator-toolbox[movingtab],
    #navigator-toolbox[flash-popup],
    #navigator-toolbox[has-popup-menu],
    #navigator-toolbox:has(.tabbrowser-tab:active),
    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
      --zen-toolbox-max-width: 45px;
      max-width: var(--zen-toolbox-max-width) !important;
      min-width: calc(var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2 + 2px) !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);
        position: absolute;
        padding: var(--zen-toolbox-padding);
        padding-top: 0;
        transition: 0 !important;
        /*animation: zen-vtabs-animation 0.3s ease-in-out;*/
        -moz-window-dragging: no-drag;
        overflow: hidden;
        transition: width 0.2s !important;
        border-right: 1px solid var(--zen-colors-border);

        & .tab-throbber,
        & .tab-icon-pending,
        & .tab-icon-image,
        & .tab-sharing-icon-overlay,
        & .tab-icon-overlay {
          transition: 0.1s !important;
        }
      }

      /* Make pinned tabs stay in a single line */
      #vertical-pinned-tabs-container {
        display: flex;
        flex-direction: column;
        gap: 0 !important;

        position: relative;

        & .tabbrowser-tab {
          & .tab-label-container {
            display: flex;
          }

          & .tab-throbber,
          & .tab-icon-pending,
          & .tab-icon-image,
          & .tab-sharing-icon-overlay,
          & .tab-icon-overlay {
            margin-inline-end: var(--toolbarbutton-inner-padding) !important;
          }

          &:not(:hover):not([selected]):not([multiselected]) .tab-background {
            box-shadow: none;

            background: transparent !important;
          }
        }
      }

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

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

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

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

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

  /* Customization mode */
  /*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
    overflow: hidden;
    max-width: 0 !important;
    margin-right: var(--zen-element-separation);
    padding: 0 !important;
    opacity: 0;
    display: none;
  }*/

  :root[customizing] #TabsToolbar > *,
  :root[customizing] #TabsToolbar-customization-target {
    min-width: unset !important;
  }

  /* Mark: Sidebar top buttons */
  #zen-sidebar-top-buttons {
    order: -1;

    min-width: unset !important;
    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;

    & #zen-sidebar-top-buttons-customization-target {
      height: 100%;
      align-items: center;

      #nav-bar:has(&) & {
        padding-inline-start: var(--toolbarbutton-outer-padding);
      }

      #browser:has(#navigator-toolbox[zen-right-side='true']) & {
        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
      }

      & toolbarbutton {
        height: 100%;
        padding: 0 var(--toolbarbutton-outer-padding) !important;
      }
    }

    & .zen-sidebar-action-button {
      padding: 0 !important;

      & label {
        display: none !important;
      }
    }
  }
}