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

//-- Mixin ---------------------------------------------------------------------
@mixin _combined_nav_button_background($autohideOptionName) {
  > .toolbarbutton-icon {
    background-color: var(--uc-combined-circlebutton-background);
  }
  &:not([disabled], [open]):hover > .toolbarbutton-icon {
    background-color: var(--uc-combined-circlebutton-hover-background) !important;
    box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
    border-color: hsla(240,5%,5%,.35);
  }
  &[open] > .toolbarbutton-icon,
  &:not([disabled]):hover:active > .toolbarbutton-icon {
    background-color: var(--uc-combined-circlebutton-active-background) !important;
    border-color: hsla(240,5%,5%,.40);
  }

  &[disabled="true"] {
    > .toolbarbutton-icon {
      background-color:  color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important;
      fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%);
    }
    @include NotOption($autohideOptionName) {
      &[disabled="true"] {
        opacity: 1 !important; /* Original: 0.4 */
      }
    }
  }
}
@mixin _combined_forward_button_background() {
  @include _combined_nav_button_background("userChrome.autohide.forward_button");
}
@mixin _combined_back_button_background() {
  @include _combined_nav_button_background("userChrome.autohide.back_button");
}

@mixin _back_button_circle_shape() {
  z-index: 3 !important;
  background-color: var(--toolbar-bgcolor) !important;
  background-clip: content-box !important;
  border-radius: 100%;

  padding-block: 0 !important;
  @include NotOption("userChrome.autohide.back_button") {
    padding-inline-end: 0 !important;
  }
  @include Option("userChrome.autohide.back_button") {
    &:not([disabled="true"]) {
      padding-inline-end: 0 !important;
    }
    &[disabled="true"] {
      padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
    }
  }
  @include Option("userChrome.padding.toolbar_button") {
    @include Option("userChrome.padding.toolbar_button.compact") {
      --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
    }
  }

  > menupopup {
    margin-top: -1px !important;
  }

  > .toolbarbutton-icon {
    background-origin: padding-box;
    background-clip: padding-box;
    border: 1px solid var(--uc-combined-circlebutton-border-color);
    border-radius: 10000px !important;

    padding-inline-end: var(--urlbar-icon-padding) !important;
    height: auto !important
  }
}

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

#nav-bar-customization-target > {
  @include NotOption("userChrome.combined.nav_button.normal_forward") {
    #forward-button {
      --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px);

      z-index: 2;
      position: relative;

      > .toolbarbutton-icon {
        padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
        padding-block: var(--urlbar-icon-padding) !important;
        height: var(--uc-urlbar-icon-size) !important;
      }

      @include Option("userChrome.combined.urlbar.nav_button") {
        padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
      }
      @include NotOption("userChrome.combined.urlbar.nav_button") {
        @include NotOption("userChrome.combined.nav_button.none_background") {
          @include Option("userChrome.combined.urlbar.home_button") {
            @include NotOption("userChrome.combined.nav_button.home_button") {
              @include _combined_forward_button_background;
            }
          }
          @include NotOption("userChrome.combined.urlbar.home_button") {
            @include _combined_forward_button_background;
          }
        }
      }

      @include NotOption("userChrome.autohide.forward_button") {
        margin-inline-start: var(--uc-forward-button-margin) !important;
      }
      @include Option("userChrome.autohide.forward_button") {
        &:not([disabled="true"]) {
          margin-inline-start: var(--uc-forward-button-margin) !important;
        }
      }
    }
  }

  #back-button {
    position: relative;

    @include NotOption("userChrome.combined.urlbar.home_button") {
      @include NotOption("userChrome.combined.nav_button.home_button") {
        @include _combined_back_button_background;
      }
    }
    @include Option(
      "userChrome.combined.urlbar.home_button",
      "userChrome.combined.nav_button.home_button"
    ) {
      @include NotOption("userChrome.combined.nav_button.none_background") {
        @include _combined_back_button_background;
      }
    }
    @include Option(
      "userChrome.combined.nav_button.home_button",
      "userChrome.combined.urlbar.home_button"
    ) {
      z-index: 2;

      margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important;

      > .toolbarbutton-icon {
        padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
        padding-block: var(--urlbar-icon-padding) !important;
        height: var(--uc-urlbar-icon-size) !important;
      }
    }

    @include NotOption("userChrome.combined.nav_button.home_button") {
      @include Option("userChrome.combined.urlbar.nav_button") {
        @include NotOption("userChrome.combined.urlbar.home_button") {
          @include _back_button_circle_shape;
        }
      }
      @include NotOption("userChrome.combined.urlbar.nav_button") {
        @include _back_button_circle_shape;
      }
    }
  }
}