FirefoxCSS: restore Photon styled back button on Proton styled browser versions

toolbar-backbutton.css

:root {
	--toolbarbutton-hover-background: color-mix(in srgb, currentColor 15%, transparent)  !important;
	--toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent)  !important;
	
	--backbutton-background: var(--toolbarbutton-hover-background) !important;
	--backbutton-hover-background: var(--toolbarbutton-active-background) !important;
	--backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent) !important;
	
	--backbutton-border-color: hsla(240,5%,5%,.3) !important;
	
	--toolbarbutton-hover-transition-duration: 150ms !important;
}

:root:not([uidensity=compact]) #back-button {
  padding-block: 3px;
  padding-inline: 3px 0;
  position: relative !important;
  z-index: 1 !important;
  border-radius: 0 10000px 10000px 0;
}

:root:not([uidensity=compact]) #back-button:-moz-locale-dir(rtl) {
  border-radius: 10000px 0 0 10000px;
}

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

:root:not([uidensity=compact]) #back-button > .toolbarbutton-icon {
  background-color: var(--backbutton-background);
  background-origin: padding-box;
  background-clip: padding-box;
  border: 1px solid var(--backbutton-border-color);
  border-radius: 10000px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 8px !important;
  transition-property: box-shadow;
  transition-duration: var(--toolbarbutton-hover-transition-duration);
}

:root:not([uidensity=compact]) #back-button:-moz-focusring > .toolbarbutton-icon {
  -moz-outline-radius: 10000px;
}

#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#PanelUI-menu-button:-moz-locale-dir(rtl) > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  scale: -1 1;
}

:root[uidensity=touch] #back-button:-moz-focusring > .toolbarbutton-icon {
  outline-offset: calc(var(--focus-outline-width) * -1 - 2px);
}

:root[uidensity=touch] #back-button {
  padding-block: 1px;
  padding-inline-start: 1px;
}

:root[uidensity=touch] #back-button > .toolbarbutton-icon {
  width: 38px;
  height: 38px;
  padding: 10px;
}

:root:not([uidensity=compact]) #back-button:not([disabled], [open]):hover > .toolbarbutton-icon {
  background-color: var(--backbutton-hover-background) !important;
  box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
  border-color: hsla(240,5%,5%,.35);
}

:root:not([uidensity=compact]) #back-button[open] > .toolbarbutton-icon,
:root:not([uidensity=compact]) #back-button:not([disabled]):hover:active > .toolbarbutton-icon {
  background-color: var(--backbutton-active-background) !important;
  border-color: hsla(240,5%,5%,.40);
}

Finding how to properly restore the back button involved finding out how did the Firefox designers do it on the last Photon version.

The browser toolbox revealed that the style of the button was around line 1912 in chrome://browser/skin/browser.css.
From there I copied all rulesets that can apply to the back button, and made a few styles !important in it.
At the end, the back button seems to be pixel perfectly the same as it looked in Firefox 88. That is, if you also change the back arrow to the old one..

Screenshot from Firefox 88.0.1:

Screenshot from Firefox Developer 96.0b6: (with the above stylesheet and an icon replace applied)

The hover and active highlight should be the same too.