@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: calc(var(--zen-element-separation) / 1.5);
  }

  #vertical-pinned-tabs-container-separator {
    background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
    margin: 8px auto;
    border: none;
    height: 1px;
    width: 98%;

    #vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + & {
      display: none;
    }
  }

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

    --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);

    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;

    border: none;
    order: 0 !important;

    display: flex;
  }

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

  #TabsToolbar-customization-target {
    position: relative;
    max-width: 100%;
    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: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
      }
    }

    & > * {
      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;

    --tab-inner-inline-margin: 0;

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

    --tab-block-margin: 2px;
    --tab-selected-bgcolor: light-dark(rgba(255,255,255,.8), rgba(255,255,255,.25));
    grid-gap: 0 !important;

    &[overflow]::after,
    #vertical-tabs-newtab-button {
      /* Hide separator they give us, eww */
      display: none !important;
    }

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

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

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

      & .tab-background {
        overflow: hidden;

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

      &[selected] .tab-background {
        backdrop-filter: blur(10px);
      }

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

      /* We have a tab inside a tab, this means, it's a glance tab */
      & .tabbrowser-tab {
        border-radius: 5px;
        pointer-events: none;
        margin: 0;
        --toolbarbutton-inner-padding: 0;

        & .tab-background {
          background: transparent;
          box-shadow: none !important;
        }
        & label { display: none !important; }
        & .tab-close-button { 
          display: none !important; 
        }

        & .tab-icon-image {
          --toolbarbutton-inner-padding: 0 !important;
        }
      }
    }
  }

  #zen-sidebar-icons-wrapper {
    background: transparent;
    gap: 5px;
    align-items: center;

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

    & > 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;
    max-height: unset !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;

    & .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
      background: transparent !important;
    }

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

    .tabbrowser-tab[zen-glance-tab='true'] {
      width: fit-content !important;
    }
  }

  /* 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;
    --tab-icon-end-margin: 8.5px;
    padding: var(--zen-toolbox-padding);
    padding-left: 0;
    padding-top: 0;

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

    & #tabbrowser-arrowscrollbox-periphery {
      margin-inline: var(--tab-block-margin);
    }

    & #zen-sidebar-top-buttons {
      padding-left: var(--zen-toolbox-padding);
    }

    & #zen-workspaces-button[as-button='true'] {
      width: calc(100% - 10px) !important;
    }

    & #zen-current-workspace-indicator-icon[no-icon='true'] {
      display: none;
    }

    & #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])) {
      position: relative;

      & .tabbrowser-tab {
        width: 100%;
      }
    }

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

      width: 100%;
      position: relative;
    }

    & #zen-essentials-container {
      --tab-min-height: 44px;
    }

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

    &:not([zen-right-side='true']):not([zen-user-hover='true']) {
      padding-right: 0;
      & #titlebar {
        padding-left: var(--zen-toolbox-padding);
      }
    }

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

      & > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
      & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
        width: 100%;
        border-radius: var(--tab-border-radius);

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

        & label {
          display: flex;
          width: 100%;
        }

        & 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 {
      --tab-inline-padding: 8px;
      & .tabbrowser-tab {

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

        & .tab-background {
          @media not (prefers-color-scheme: dark) {
            &:is([selected], [multiselected]) {
              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
            }
          }
          margin-inline: var(--tab-block-margin);
          width: -moz-available;
        }

        &:is(:hover, [visuallyselected]) .tab-close-button {
          display: block;
          --tab-inline-padding: 0; /* Avoid weird padding */
        }

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

    @media (-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-toolbar') and (not (-moz-bool-pref: 'zen.view.compact.hide-tabbar')) {
      & {
        margin-top: var(--zen-element-separation) !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'])
        )
    ) {
    --tab-min-width: 36px !important;

    /* Important: When changin this value, make sure expand on hover doesn't break! */
    --zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
    --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
    max-width: var(--zen-toolbox-max-width) !important;
    min-width: var(--zen-toolbox-max-width) !important;

    --zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
    &[zen-right-side='true'] {
      margin-left: var(--zen-tabbar-offset);
    }

    &:not([zen-right-side='true']) {
      margin-right: var(--zen-tabbar-offset);
    }

    & #zen-current-workspace-indicator-name {
      display: none;
    }

    & #zen-current-workspace-indicator {
      padding-left: 0;
      padding-right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .4;
    }

    & #zen-essentials-container {
      justify-content: center;
    }

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

    & #tabbrowser-arrowscrollbox-periphery {
      & > toolbarbutton {
        margin: 0 auto !important;
        padding: 0 !important;
      }

      &::before {
        width: 90% !important;
      }
    }

    & #EssentialsToolbar {
      display: none !important;
    }

    & #essentials-accordion-header {
      display: none !important;
    }

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

      & .tabbrowser-tab {
        max-width: var(--tab-min-width);
      }
    }

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

      &::after {
        bottom: -1px !important;
      }
    }

    & #tabbrowser-tabs {
      margin-top: -2px;

      & .tabbrowser-tab {
        margin: 0 auto;

        & .tab-background {
          margin-inline: auto !important;

          &:is([selected], [multiselected]) {
            box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
            
            @media not (prefers-color-scheme: dark) {
              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
            }
          }
        }

        & .tab-content {
          display: flex;
          align-content: center;
          justify-content: center;
          padding: 0 !important;

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

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

          /* Hide glances */
          & .tabbrowser-tab {
            display: none !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;
          }

          @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
            :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: var(--zen-toolbox-max-width) !important;
      padding: 0 !important;

      & #TabsToolbar {
        z-index: 100 !important;
        width: 250px !important;
        
        background: var(--zen-main-browser-background-toolbar) !important;
        background-attachment: fixed !important;
        background-size: 2000px !important; /* Dont ask me why */

        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);

        position: absolute;
        padding: var(--zen-toolbox-padding);
        transition: 0 !important;
        /*animation: zen-vtabs-animation 0.3s ease-in-out;*/
        -moz-window-dragging: no-drag;
        overflow: hidden;
        transition: width 0.2s !important;

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

      &[zen-right-side='true'] #TabsToolbar {
        right: 0;
        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;
      }

      &[selected] .tab-background {
        border-color: transparent;
      }
    }
  }

  /* 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: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
        padding: 0 var(--toolbarbutton-outer-padding) !important;
      }
    }

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

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

  #tabs-newtab-button {
    display: none;
  }

  @media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
    #tabs-newtab-button {
      display: flex !important;
    }

    #tabbrowser-arrowscrollbox-periphery {
      @media not (prefers-color-scheme: dark) {
        --zen-colors-border: var(--zen-colors-tertiary);
      }

      @media (-moz-bool-pref: 'zen.view.show-newtab-button-top') {
        order: -1;
      }

      @media (-moz-bool-pref: 'zen.view.show-newtab-button-border-top') and (not (-moz-bool-pref: 'zen.view.show-newtab-button-top')) {
        margin-top: 15px;
        position: relative;
        &::before {
          content: '';
          display: block;
          height: 1px;
          background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
          width: 98%;
          position: absolute;
          top: -8px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}

/* Mark: Essentials Toolbar */
#zen-essentials-container {
  padding-bottom: var(--zen-toolbox-padding);
  overflow: hidden;
  gap: 3px;
}

#zen-essentials-container {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  opacity: 1;
  grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  display: grid;
  padding: 0;
}

#zen-essentials-container .tabbrowser-tab {
  --toolbarbutton-inner-padding: 0;
  max-width: unset;
  width: 100% !important;
  border-radius: var(--border-radius-medium);

  &:not([selected]) .tab-background {
    background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    box-shadow: none;
  }

  backdrop-filter: blur(10px);

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

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

  & .tab-close-button {
    display: none !important;
  }

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