diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
index 8b86537b7b..6010833239 100644
--- a/scss/abstracts/_mixins.scss
+++ b/scss/abstracts/_mixins.scss
@@ -142,3 +142,15 @@
 		}
 	}
 }
+/*
+	This mixin replaces the default focus-rings - those are platform-specific, do not show up on some
+	components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).
+	Box-shadow is used to be able to set the radius.
+*/
+@mixin focus-ring($width: 1px, $radius: 5px) {
+	&:focus-visible {
+	  outline: none;
+	  box-shadow: 0 0 0 $width -moz-accent-color;
+	  border-radius: $radius;
+	}
+  }