/* Titlebar Space */
:root {
  --uc-title-pre-spacer: 30px; /* Original: 40px */
  --uc-title-post-spacer: 25px; /* Original: 40px */
  &:-moz-locale-dir(rtl) {
    --uc-title-pre-spacer: 25px;
    --uc-title-post-spacer: 30px;
  }
}
@include WindowControl_Left {
  .titlebar-spacer[type="pre-tabs"] {
    width: var(--uc-title-pre-spacer) !important;
  }
  .titlebar-spacer[type="post-tabs"] {
    width: var(--uc-title-post-spacer) !important;
  }
}
@include WindowControl_Right {
  .titlebar-spacer[type="pre-tabs"] {
    width: var(--uc-title-post-spacer) !important;
  }
  .titlebar-spacer[type="post-tabs"] {
    width: var(--uc-title-pre-spacer) !important;
  }
}

/* Tabbar Buttons */
:root {
  --newtab-button-minus-width-padding: 2px;
  --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
}
#widget-overflow-mainView {
  #new-tab-button,
  #alltabs-button {
    --newtab-button-width-padding: 0px;
  }
}
#new-tab-button > .toolbarbutton-icon,
#alltabs-button > .toolbarbutton-badge-stack {
  /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
  width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;

  /* Original: --toolbarbutton-inner-padding */
  padding-left: var(--newtab-button-width-padding) !important;
  padding-right: var(--newtab-button-width-padding) !important;
}

@include NotOption("userChrome.tab.photon_like_padding") {
  #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) {
    margin-inline-start: 1px !important;
  }
}
@include Option("userChrome.tab.photon_like_padding") {
  #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) {
    margin-inline-start: 0 !important;
  }
}

:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
  --scrollbtn-inner-padding: 1px;
  --scrollbtn-outer-padding: 3px;
}
#scrollbutton-up {
  padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
  padding-right: var(--scrollbtn-outer-padding, 4px) !important;
}
#scrollbutton-down {
  padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
  padding-right: var(--scrollbtn-inner-padding, 4px) !important;
}

:root:not([uidensity="touch"]) #new-tab-button,
#alltabs-button {
  --toolbarbutton-outer-padding: 1px; /* Original: 2px*/
}

/* Tab - Max Size */
:root {
  @include NotOption("userChrome.tab.photon_like_padding") {
    --tab-max-width: 240px;
  }
  @include Option("userChrome.tab.photon_like_padding") {
    --tab-max-width: 225px;
  }
  @include OneLiner {
    --tab-max-width: 180px;
  }
}
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
  max-width: var(--tab-max-width) !important; /* Original: 225px */
}

/* neighbouring tabs should "pinch" together */
#tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
  > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery {
  min-width: 3px; // With Panorama Tab Groups #643
}
@include NotOption("userChrome.tab.photon_like_padding") {
  @include Option("userChrome.tab.lepton_like_padding") {
    .tabbrowser-tab {
      // Original: padding-inline 2px, margin-inline 0px #643
      &[pinned] {
        padding-inline: 1px !important;
      }
      &:not([pinned]) {
        margin-inline: -1px !important;
      }
    }
  }
  @include NotOption("userChrome.tabbar.multi_row") {
    #TabsToolbar:not([multibar]) .tabbrowser-tab:not(:last-of-type) {
      margin-inline-end: -2px !important;
    }
  }
}
@include Option("userChrome.tab.photon_like_padding") {
  .tabbrowser-tab {
    padding-inline: 0 !important;
  }
}