Limit negative focus outline-offset to elements that need it

assets/css/custom-props/common.css

@@ -5,7 +5,7 @@
   --borderRadius-lg: 14px;
   --borderRadius-base: 8px;
   --borderRadius-sm: 3px;
-  --navTabBorderWidth: 2px;
+  --borderWidth: 2px;
 
   /* Font Families */
   /* These mirror modern-normalize.css with "Lato" on top */

assets/css/focus.css

@@ -7,9 +7,7 @@ button:focus,
 [type="button"]:focus,
 [type="reset"]:focus,
 [type="submit"]:focus {
-  outline: 2px solid var(--main);
-  /* negative offset to make outline visible when overflow hidden */
-  outline-offset: -2px;
+  outline: var(--borderWidth) solid var(--main);
 }
 
 *:focus:not(:focus-visible),

assets/css/layout.css

@@ -38,7 +38,7 @@ body {
 }
 
 .sidebar-button {
-  padding: 20px 12px 18px 19px;
+  padding: 20px 12px 18px;
   position: fixed;
   z-index: 200;
   top: 0;

assets/css/settings.css

@@ -102,8 +102,8 @@
   }
 
   & .switch-button__checkbox:focus + .switch-button__bg {
-    outline: 2px solid var(--main);
-    outline-offset: 2px;
+    outline: var(--borderWidth) solid var(--main);
+    outline-offset: var(--borderWidth);
   }
 
   & .switch-button__checkbox:focus:not(:focus-visible) + .switch-button__bg {

assets/css/sidebar.css

@@ -135,6 +135,11 @@
       color: var(--sidebarStaleVersion);
       font-weight: 400;
     }
+
+    /* keep focus outline inside overflow-clipped ancestor */
+    & a:focus {
+      outline-offset: calc(-1 * var(--borderWidth));
+    }
   }
 
   & .sidebar-staleIcon {
@@ -149,6 +154,11 @@
     overflow: auto;
     scrollbar-width: thin;
 
+    /* keep focus outline inside overflow-clipped ancestor */
+    & button:focus {
+      outline-offset: calc(-1 * var(--borderWidth));
+    }
+
     & :is(li, li button) {
       text-transform: uppercase;
       letter-spacing: 0.02em;
@@ -165,7 +175,7 @@
     & button {
       background: none;
       border: 0;
-      border-bottom: var(--navTabBorderWidth) solid transparent;
+      border-bottom: var(--borderWidth) solid transparent;
       border-radius: 0;
       -webkit-appearance: none;
       text-align: inherit;
@@ -178,13 +188,13 @@
       transition: var(--transition-all);
 
       &:not([aria-selected]):hover {
-        border-bottom: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
+        border-bottom: var(--borderWidth) solid var(--sidebarInactiveItemBorder);
         color: var(--sidebarAccentMain);
         transition: var(--transition-all);
       }
 
       &[aria-selected] {
-        border-bottom: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
+        border-bottom: var(--borderWidth) solid var(--sidebarLanguageAccentBar);
         color: var(--sidebarAccentMain);
       }
     }
@@ -212,6 +222,11 @@
       text-overflow: ellipsis;
     }
 
+    /* keep focus outline inside overflow-clipped ancestor */
+    & a:focus {
+      outline-offset: calc(-1 * var(--borderWidth));
+    }
+
     & li {
       padding: 0;
       line-height: 27px;
@@ -239,7 +254,7 @@
     & a {
       margin-right: 30px;
       padding: 3px 0 3px 12px;
-      border-left: var(--navTabBorderWidth) solid transparent;
+      border-left: var(--borderWidth) solid transparent;
       color: var(--sidebarItem);
 
       &[aria-selected] {
@@ -385,6 +400,11 @@
   &:hover {
     color: var(--sidebarHover);
   }
+
+  /* keep focus outline inside overflow-clipped ancestor */
+  &:focus {
+    outline-offset: calc(-1 * var(--borderWidth));
+  }
 }
 
 body:not(.sidebar-open) .sidebar-button {

assets/css/tabset.css

@@ -1,8 +1,7 @@
 .tabset {
-  --borderWidth: 1px;
   --tabsetPadding: var(--baseLineHeight);
   margin: var(--baseLineHeight) 0;
-  border: var(--borderWidth) solid var(--tabBorder);
+  border: 1px solid var(--tabBorder);
   padding: 0 var(--tabsetPadding);
   border-radius: var(--borderRadius-lg);
 }
@@ -25,11 +24,16 @@
   border: 0;
   box-shadow: none;
   cursor: pointer;
-  border-bottom-width: 2px;
+  border-bottom-width: var(--borderWidth);
   border-bottom-style: solid;
   border-bottom-color: transparent;
   transition: var(--transition-all);
 
+  /* keep focus outline inside overflow-clipped ancestor */
+  &:focus {
+    outline-offset: calc(-1 * var(--borderWidth));
+  }
+
   &:hover {
     border-bottom-color: var(--tabBorderTop);
     color: var(--textHeaders);