Firefox-UI-Fix/src/combined/_index.scss

/*= Combined - At URL bar ====================================================*/
@include Option(
  "userChrome.combined.nav_button",
  "userChrome.combined.nav_button.home_button",
  "userChrome.combined.urlbar.nav_button",
  "userChrome.combined.urlbar.home_button",
  "userChrome.combined.urlbar.reload_button"
) {
  // Init
  #nav-bar {
    // Color
    --uc-combined-circlebutton-background: hsla(0,100%,100%,.5);
    --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background);
    --uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background);
    --uc-combined-circlebutton-border-color: hsla(240,5%,5%,.3);
    &[brighttext] {
      // Original: Using :-moz-lwtheme
      --uc-combined-circlebutton-background: var(--toolbarbutton-hover-background);
      --uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background);
      --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
    }

    // Padding & Size
    --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding));
    --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary));
    --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding));
    --uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary));

    --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding));
  }

  #nav-bar-customization-target > * {
    @include BoxOrder(1);
  }
  // Preserve
  // `back`    -> 2
  // `home`    -> 3
  // `forward` -> 4
  #nav-bar-customization-target > #urlbar-container {
    @include BoxOrder(5);
  }
  // `reload`  -> 6
  #nav-bar-customization-target > #urlbar-container ~ * {
    @include BoxOrder(7);
  }
}

@include Option("userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button") {
  #nav-bar-customization-target > #urlbar-container {
    /* var(--urlbar-margin-inline) */
    margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important;

    > #urlbar:not([breakout][breakout-extend]) {
      padding-left: var(--uc-urlbar-combined-margin, 0px);
    }

    @include Option("userChrome.combined.urlbar.nav_button") {
      --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size);
    }
    @include NotOption("userChrome.combined.urlbar.nav_button") {
      --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize);

      @include Option("userChrome.combined.nav_button") {
        @include Option("userChrome.combined.nav_button.home_button") {
          @include Option("userChrome.combined.urlbar.home_button") {
            --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size);
          }
        }
      }
    }
  }
  #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar {
    @include Option("userChrome.combined.urlbar.nav_button") {
      @include Option("userChrome.autohide.forward_button") {
        &:not([breakout][breakout-extend]) {
          padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding));
        }
      }
      @include Animate {
        transition-property: margin-left, padding-left;
        transition-duration: 0.5s;
        transition-timing-function: var(--animation-easing-function);
      }
    }
  }
}

@include Option("userChrome.combined.nav_button", "userChrome.combined.urlbar.nav_button") {
  @import "back_forward_button";
}
@include Option("userChrome.combined.nav_button") {
  @include Option("userChrome.combined.nav_button.home_button") {
    @import "home_button";
  }
}

@include Option("userChrome.combined.urlbar.nav_button") {
  #nav-bar-customization-target > {
    #back-button {
      @include BoxOrder(2);
    }
    #forward-button {
      @include BoxOrder(4);
    }

    $button: ":is(toolbarbutton, toolbaritem)";
    @include Option("userChrome.combined.urlbar.home_button") {
      $combindButtons: "#back-button, #forward-button, #home-button";
      $target: ":is(#{$combindButtons})";
      $notTarget: "#{$button}:not(#{$combindButtons})";

      :first-child#{$target} + {
        #{$notTarget},
        #{$target} + #{$notTarget},
        #{$target} + #{$target} + #{$button} {
          padding-inline-start: var(--toolbar-start-end-padding) !important;
        }
      }
    }
    @include NotOption("userChrome.combined.urlbar.home_button") {
      $combindButtons: "#back-button, #forward-button";
      $target: ":is(#{$combindButtons})";
      $notTarget: "#{$button}:not(#{$combindButtons})";

      :first-child#{$target} + {
        #{$notTarget},
        #{$target} + #{$button} {
          padding-inline-start: var(--toolbar-start-end-padding) !important;
        }
      }
    }
  }
}
@include Option("userChrome.combined.urlbar.home_button") {
  #nav-bar-customization-target > #home-button {
    @include BoxOrder(3);

    @include NotOption("userChrome.combined.urlbar.nav_button") {
      &:is(:first-child) + :is(toolbarbutton, toolbaritem) {
        padding-inline-start: var(--toolbar-start-end-padding) !important;
      }
    }
  }
  @import "home_button";
}
@include Option("userChrome.combined.urlbar.reload_button") {
  #nav-bar-customization-target > #stop-reload-button {
    @include BoxOrder(6);
  }

  @import "reload_button";
}