Firefox-UI-Fix/src/tabbar/layout/_navbar_padding.scss

/*= Navbar - Padding for window controls =====================================*/
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
:root {
  --uc-window-control-width: 0px;   /* Same as .titlebar-buttonbox-container      -  Space reserved for window controls */
  --uc-window-drag-space-pre: 0px;  /* Same as .titlebar-spacer[type="pre-tabs"]  - Extra space reserved on both sides of the nav-bar to be able to drag the window */
  --uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */

  --uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
}
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-control-width: 84px; /* 84px is default value of linux */
  --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px
  --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px
}
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

//-- Mixin ---------------------------------------------------------------------
@mixin _remove_spacer_pre() {
  /* Don't need pre spacer */
  --uc-window-drag-space-pre: 0px;
}

@mixin _remove_spacer_post() {
  /* Don't need window control */
  --uc-window-control-width: 0px;
  --uc-window-drag-space-post: 0px;
}

@mixin _remove_spacer_oneLiner() {
  @include Option("userChrome.tabbar.one_liner.tabbar_first") {
    @include _remove_spacer_pre;
  }
  @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
    @include _remove_spacer_post;
  }
}

@mixin _oneLiner_navBar_borderPadding() {
  @include NotOption("userChrome.tabbar.one_liner") {
    @content;
  }
  @include Option("userChrome.tabbar.one_liner") {
    @include Option("userChrome.tabbar.one_liner.combine_navbar") {
      @content;
    }
    @include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
      @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
        @media screen and (max-width: 1100px) {
          @content;
        }
      }
    }
  }
}

@mixin _oneLiner_navBar_marginGap() {
  @include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
    @include Option("userChrome.tabbar.one_liner.responsive") {
      @media screen and (min-width: 1100px) {
        @content;
      }
    }
  }
}

//------------------------------------------------------------------------------

@include Option("userChrome.tabbar.one_liner") {
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    @include NotOption("userChrome.tabbar.one_liner.responsive") {
      @include _remove_spacer_oneLiner;
    }
    @include Option("userChrome.tabbar.one_liner.responsive") {
      @media screen and (max-width: 1100px) {
        @include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
          @include _remove_spacer_pre;
          @include _remove_spacer_post;
        }
      }
      @media screen and (min-width: 1100px) {
        @include _remove_spacer_oneLiner;
      }
    }
  }
}

#nav-bar {
  border-inline-style: solid !important;
  border-inline-color: var(--toolbar-bgcolor);

  @include _oneLiner_navBar_borderPadding {
    border-inline-start-width: var(--uc-window-drag-space-pre);
    border-inline-end-width: var(--uc-widow-control-space);
  }

  @include Option("userChrome.tabbar.one_liner") {
    @include _oneLiner_navBar_marginGap {
      @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
        margin-inline-start: var(--uc-window-drag-space-pre) !important;
      }
      @include Option("userChrome.tabbar.one_liner.tabbar_first") {
        margin-inline-end: var(--uc-widow-control-space) !important;
      }
    }
  }
}

/* Windows */
@include OS($win7, $win8) {
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}

@include OS($win10) {
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 138px;
  }
}

/* Use this pref to check Mac OS where window controls are on left */
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
@include OS($mac) {
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 72px;
  }
  :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
    @include _oneLiner_navBar_borderPadding {
      border-inline-start-width: var(--uc-widow-control-space);
      border-inline-end-width: var(--uc-window-drag-space-pre);
    }

    @include Option("userChrome.tabbar.one_liner") {
      @include _oneLiner_navBar_marginGap {
        @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
          margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important;
        }
        @include Option("userChrome.tabbar.one_liner.tabbar_first") {
          margin-inline-end: var(--uc-widow-control-space, 0px) !important;
        }
      }
    }
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
  :root[sizemode="fullscreen"] #window-controls {
    right: unset;
  }
}