From 55b97cd397b2957008283d4e0fbda81198e58e26 Mon Sep 17 00:00:00 2001
From: Bogdan Abaev <bogdan@zotero.org>
Date: Thu, 21 Dec 2023 09:15:48 -0500
Subject: [PATCH] focus-ring mixin

@focus-ring adds an accent color box-shadow around the component
on :focus-visible.
---
 scss/abstracts/_mixins.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

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;
+	}
+  }