From bba4b46a3be065537441f51f71bc11ef1298b23e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Fri, 21 Feb 2025 15:53:08 +0100
Subject: [PATCH] MDL-84618 theme_boost: Fix buttons .btn hover styles

---
 lib/templates/search_input_navbar.mustache |   2 +-
 theme/boost/scss/moodle/buttons.scss       |  96 ++++++----
 theme/boost/style/moodle.css               | 212 ++++++++++++---------
 theme/classic/style/moodle.css             | 212 ++++++++++++---------
 4 files changed, 299 insertions(+), 223 deletions(-)

diff --git a/lib/templates/search_input_navbar.mustache b/lib/templates/search_input_navbar.mustache
index 8ecd388ae4a..5cb12a747c6 100644
--- a/lib/templates/search_input_navbar.mustache
+++ b/lib/templates/search_input_navbar.mustache
@@ -68,7 +68,7 @@
         </form>
     </div>
     <a
-        class="btn btn-open rounded-0 nav-link"
+        class="rounded-0 nav-link icon-no-margin"
         data-bs-toggle="collapse"
         data-action="opensearch"
         href="#searchform-navbar"
diff --git a/theme/boost/scss/moodle/buttons.scss b/theme/boost/scss/moodle/buttons.scss
index 2bdf0851bd0..66461329fb2 100644
--- a/theme/boost/scss/moodle/buttons.scss
+++ b/theme/boost/scss/moodle/buttons.scss
@@ -1,3 +1,8 @@
+/**
+ * File buttons.scss.
+ * Contains styles for buttons.
+ */
+
 .singlebutton {
     display: inline-block;
 
@@ -38,47 +43,28 @@ p.arrow_button {
     margin: 0 0 10px 5px;
 }
 
-.btn.btn-icon {
-    height: ($icon-height + 20px);
-    width: ($icon-width + 16px);
-    font-size: $icon-height;
-    line-height: $icon-height;
-    padding: 0;
-    border-radius: 50%;
-    flex-shrink: 0;
-
-    &:hover,
-    &:focus {
-        background-color: $gray-200;
-    }
-
-    @each $size, $length in $iconsizes {
-        &.icon-size-#{$size} {
-            height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
-            width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
-            font-size: $length !important; /* stylelint-disable-line declaration-no-important */
-            line-height: $length !important; /* stylelint-disable-line declaration-no-important */
-        }
-    }
+/* Small buttons should have the same border-radius as the normal buttons. */
+.btn-sm,
+.btn-group-sm > .btn {
+    --bs-btn-border-radius: var(--#{$prefix}border-radius);
 }
 
-// Specific styles for the collapse/expand buttons.
-.btn.btn-icon.icons-collapse-expand {
-    color: $primary;
-    background-color: $primary-light-background;
-    &:hover {
-        outline: 2px solid $primary;
-    }
-}
+/**
+ * Focus styles to improve Bootstrap default contrast.
+ */
 
 @mixin button-focus($background, $innershadow) {
-    &:focus,
+    &:focus-visible,
     &.focus {
         outline: $btn-focus-width solid darken($background, 40%);
         box-shadow: inset 0 0 0 2px $innershadow;
     }
 }
 
+.btn {
+    @include button-focus($secondary, $white);
+}
+
 @each $color, $value in $theme-colors {
     .btn-#{$color} {
         @include button-focus($value, $white);
@@ -91,15 +77,49 @@ p.arrow_button {
     }
 }
 
-// Small buttons should have the same border-radius as the normal buttons.
-.btn-sm,
-.btn-group-sm > .btn {
-    --bs-btn-border-radius: var(--#{$prefix}border-radius);
+/**
+ * Icon buttons.
+ */
+
+.btn.btn-icon {
+    height: ($icon-height + 20px);
+    width: ($icon-width + 16px);
+    font-size: $icon-height;
+    line-height: $icon-height;
+    padding: 0;
+    border-radius: 50%;
+    flex-shrink: 0;
+
+    &:hover,
+    &:focus {
+        background-color: $gray-200;
+    }
+
+    @include button-focus($secondary, $white);
+
+    @each $size, $length in $iconsizes {
+        &.icon-size-#{$size} {
+            height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
+            width: (map-get($iconwidthsizes, $size) + 20px) !important; /* stylelint-disable-line declaration-no-important */
+            font-size: $length !important; /* stylelint-disable-line declaration-no-important */
+            line-height: $length !important; /* stylelint-disable-line declaration-no-important */
+        }
+    }
 }
 
-//
-// Subtle buttons.
-//
+/* Specific styles for the collapse/expand buttons. */
+.btn.btn-icon.icons-collapse-expand {
+    color: $primary;
+    background-color: $primary-light-background;
+    &:hover {
+        outline: 2px solid $primary;
+    }
+    @include button-focus($primary-bg-subtle, $white);
+}
+
+/**
+ * Subtle buttons.
+ */
 
 @each $color, $value in $theme-colors {
     .btn-subtle-#{$color} {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 3523a9e76ff..45b3f2050ac 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -37151,6 +37151,10 @@ table .sticky-column {
   font-size: 3rem;
 }
 
+/**
+ * File buttons.scss.
+ * Contains styles for buttons.
+ */
 .singlebutton {
   display: inline-block;
 }
@@ -37186,6 +37190,103 @@ p.arrow_button {
   margin: 0 0 10px 5px;
 }
 
+/* Small buttons should have the same border-radius as the normal buttons. */
+.btn-sm,
+.btn-group-sm > .btn {
+  --bs-btn-border-radius: var(--bs-border-radius);
+}
+
+/**
+ * Focus styles to improve Bootstrap default contrast.
+ */
+.btn:focus-visible, .btn.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-primary:focus-visible, .btn-primary.focus {
+  outline: 0.25rem solid #000102;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-secondary:focus-visible, .btn-secondary.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-success:focus-visible, .btn-success.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-info:focus-visible, .btn-info.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-warning:focus-visible, .btn-warning.focus {
+  outline: 0.25rem solid #694109;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-danger:focus-visible, .btn-danger.focus {
+  outline: 0.25rem solid #1a0604;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-light:focus-visible, .btn-light.focus {
+  outline: 0.25rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-dark:focus-visible, .btn-dark.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-outline-primary:focus-visible, .btn-outline-primary.focus {
+  outline: 0.25rem solid #000102;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-secondary:focus-visible, .btn-outline-secondary.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-success:focus-visible, .btn-outline-success.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-info:focus-visible, .btn-outline-info.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-warning:focus-visible, .btn-outline-warning.focus {
+  outline: 0.25rem solid #694109;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-danger:focus-visible, .btn-outline-danger.focus {
+  outline: 0.25rem solid #1a0604;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-light:focus-visible, .btn-outline-light.focus {
+  outline: 0.25rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-dark:focus-visible, .btn-outline-dark.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+/**
+ * Icon buttons.
+ */
 .btn.btn-icon {
   height: 36px;
   width: 36px;
@@ -37198,6 +37299,10 @@ p.arrow_button {
 .btn.btn-icon:hover, .btn.btn-icon:focus {
   background-color: #e9ecef;
 }
+.btn.btn-icon:focus-visible, .btn.btn-icon.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
 .btn.btn-icon.icon-size-0 {
   height: 20px !important; /* stylelint-disable-line declaration-no-important */
   width: 20px !important; /* stylelint-disable-line declaration-no-important */
@@ -37247,6 +37352,7 @@ p.arrow_button {
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/* Specific styles for the collapse/expand buttons. */
 .btn.btn-icon.icons-collapse-expand {
   color: #0f6cbf;
   background-color: #e7f0f9;
@@ -37254,92 +37360,14 @@ p.arrow_button {
 .btn.btn-icon.icons-collapse-expand:hover {
   outline: 2px solid #0f6cbf;
 }
-
-.btn-primary:focus, .btn-primary.focus {
-  outline: 0.25rem solid #000102;
+.btn.btn-icon.icons-collapse-expand:focus-visible, .btn.btn-icon.icons-collapse-expand.focus {
+  outline: 0.25rem solid #3481c1;
   box-shadow: inset 0 0 0 2px #fff;
 }
 
-.btn-secondary:focus, .btn-secondary.focus {
-  outline: 0.25rem solid #5f6e7d;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-success:focus, .btn-success.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-info:focus, .btn-info.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-warning:focus, .btn-warning.focus {
-  outline: 0.25rem solid #694109;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-danger:focus, .btn-danger.focus {
-  outline: 0.25rem solid #1a0604;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-light:focus, .btn-light.focus {
-  outline: 0.25rem solid #8193a5;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-dark:focus, .btn-dark.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-outline-primary:focus, .btn-outline-primary.focus {
-  outline: 0.25rem solid #000102;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-secondary:focus, .btn-outline-secondary.focus {
-  outline: 0.25rem solid #5f6e7d;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-success:focus, .btn-outline-success.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-info:focus, .btn-outline-info.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-warning:focus, .btn-outline-warning.focus {
-  outline: 0.25rem solid #694109;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-danger:focus, .btn-outline-danger.focus {
-  outline: 0.25rem solid #1a0604;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-light:focus, .btn-outline-light.focus {
-  outline: 0.25rem solid #8193a5;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-dark:focus, .btn-outline-dark.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-sm,
-.btn-group-sm > .btn {
-  --bs-btn-border-radius: var(--bs-border-radius);
-}
-
+/**
+ * Subtle buttons.
+ */
 .btn-subtle-primary {
   --bs-btn-font-weight: 700;
   --bs-btn-color: var(--bs-primary-text-emphasis);
@@ -37350,7 +37378,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-primary);
   --bs-btn-focus-shadow-rgb: 15, 108, 191;
 }
-.btn-subtle-primary:focus, .btn-subtle-primary.focus {
+.btn-subtle-primary:focus-visible, .btn-subtle-primary.focus {
   outline: 0.25rem solid #000102;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37365,7 +37393,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-secondary);
   --bs-btn-focus-shadow-rgb: 206, 212, 218;
 }
-.btn-subtle-secondary:focus, .btn-subtle-secondary.focus {
+.btn-subtle-secondary:focus-visible, .btn-subtle-secondary.focus {
   outline: 0.25rem solid #5f6e7d;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37380,7 +37408,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-success);
   --bs-btn-focus-shadow-rgb: 53, 122, 50;
 }
-.btn-subtle-success:focus, .btn-subtle-success.focus {
+.btn-subtle-success:focus-visible, .btn-subtle-success.focus {
   outline: 0.25rem solid black;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37395,7 +37423,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-info);
   --bs-btn-focus-shadow-rgb: 0, 129, 150;
 }
-.btn-subtle-info:focus, .btn-subtle-info.focus {
+.btn-subtle-info:focus-visible, .btn-subtle-info.focus {
   outline: 0.25rem solid black;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37410,7 +37438,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-warning);
   --bs-btn-focus-shadow-rgb: 240, 173, 78;
 }
-.btn-subtle-warning:focus, .btn-subtle-warning.focus {
+.btn-subtle-warning:focus-visible, .btn-subtle-warning.focus {
   outline: 0.25rem solid #694109;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37425,7 +37453,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-danger);
   --bs-btn-focus-shadow-rgb: 202, 49, 32;
 }
-.btn-subtle-danger:focus, .btn-subtle-danger.focus {
+.btn-subtle-danger:focus-visible, .btn-subtle-danger.focus {
   outline: 0.25rem solid #1a0604;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37440,7 +37468,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-light);
   --bs-btn-focus-shadow-rgb: 248, 249, 250;
 }
-.btn-subtle-light:focus, .btn-subtle-light.focus {
+.btn-subtle-light:focus-visible, .btn-subtle-light.focus {
   outline: 0.25rem solid #8193a5;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37455,7 +37483,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-dark);
   --bs-btn-focus-shadow-rgb: 29, 33, 37;
 }
-.btn-subtle-dark:focus, .btn-subtle-dark.focus {
+.btn-subtle-dark:focus-visible, .btn-subtle-dark.focus {
   outline: 0.25rem solid black;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37469,7 +37497,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-gray-600);
   --bs-btn-focus-shadow-rgb: 106, 115, 123;
 }
-.btn-subtle-body:focus, .btn-subtle-body.focus {
+.btn-subtle-body:focus-visible, .btn-subtle-body.focus {
   outline: 0.25rem solid #0c0d0d;
   box-shadow: inset 0 0 0 2px #fff;
 }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 50b862ceba1..ad115461afb 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -37151,6 +37151,10 @@ table .sticky-column {
   font-size: 3rem;
 }
 
+/**
+ * File buttons.scss.
+ * Contains styles for buttons.
+ */
 .singlebutton {
   display: inline-block;
 }
@@ -37186,6 +37190,103 @@ p.arrow_button {
   margin: 0 0 10px 5px;
 }
 
+/* Small buttons should have the same border-radius as the normal buttons. */
+.btn-sm,
+.btn-group-sm > .btn {
+  --bs-btn-border-radius: var(--bs-border-radius);
+}
+
+/**
+ * Focus styles to improve Bootstrap default contrast.
+ */
+.btn:focus-visible, .btn.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-primary:focus-visible, .btn-primary.focus {
+  outline: 0.25rem solid #000102;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-secondary:focus-visible, .btn-secondary.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-success:focus-visible, .btn-success.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-info:focus-visible, .btn-info.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-warning:focus-visible, .btn-warning.focus {
+  outline: 0.25rem solid #694109;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-danger:focus-visible, .btn-danger.focus {
+  outline: 0.25rem solid #1a0604;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-light:focus-visible, .btn-light.focus {
+  outline: 0.25rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-dark:focus-visible, .btn-dark.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-outline-primary:focus-visible, .btn-outline-primary.focus {
+  outline: 0.25rem solid #000102;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-secondary:focus-visible, .btn-outline-secondary.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-success:focus-visible, .btn-outline-success.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-info:focus-visible, .btn-outline-info.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-warning:focus-visible, .btn-outline-warning.focus {
+  outline: 0.25rem solid #694109;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-danger:focus-visible, .btn-outline-danger.focus {
+  outline: 0.25rem solid #1a0604;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-light:focus-visible, .btn-outline-light.focus {
+  outline: 0.25rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+.btn-outline-dark:focus-visible, .btn-outline-dark.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #343a40;
+}
+
+/**
+ * Icon buttons.
+ */
 .btn.btn-icon {
   height: 36px;
   width: 36px;
@@ -37198,6 +37299,10 @@ p.arrow_button {
 .btn.btn-icon:hover, .btn.btn-icon:focus {
   background-color: #e9ecef;
 }
+.btn.btn-icon:focus-visible, .btn.btn-icon.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
 .btn.btn-icon.icon-size-0 {
   height: 20px !important; /* stylelint-disable-line declaration-no-important */
   width: 20px !important; /* stylelint-disable-line declaration-no-important */
@@ -37247,6 +37352,7 @@ p.arrow_button {
   line-height: 48px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/* Specific styles for the collapse/expand buttons. */
 .btn.btn-icon.icons-collapse-expand {
   color: #0f6cbf;
   background-color: #e7f0f9;
@@ -37254,92 +37360,14 @@ p.arrow_button {
 .btn.btn-icon.icons-collapse-expand:hover {
   outline: 2px solid #0f6cbf;
 }
-
-.btn-primary:focus, .btn-primary.focus {
-  outline: 0.25rem solid #000102;
+.btn.btn-icon.icons-collapse-expand:focus-visible, .btn.btn-icon.icons-collapse-expand.focus {
+  outline: 0.25rem solid #3481c1;
   box-shadow: inset 0 0 0 2px #fff;
 }
 
-.btn-secondary:focus, .btn-secondary.focus {
-  outline: 0.25rem solid #5f6e7d;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-success:focus, .btn-success.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-info:focus, .btn-info.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-warning:focus, .btn-warning.focus {
-  outline: 0.25rem solid #694109;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-danger:focus, .btn-danger.focus {
-  outline: 0.25rem solid #1a0604;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-light:focus, .btn-light.focus {
-  outline: 0.25rem solid #8193a5;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-dark:focus, .btn-dark.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.btn-outline-primary:focus, .btn-outline-primary.focus {
-  outline: 0.25rem solid #000102;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-secondary:focus, .btn-outline-secondary.focus {
-  outline: 0.25rem solid #5f6e7d;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-success:focus, .btn-outline-success.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-info:focus, .btn-outline-info.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-warning:focus, .btn-outline-warning.focus {
-  outline: 0.25rem solid #694109;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-danger:focus, .btn-outline-danger.focus {
-  outline: 0.25rem solid #1a0604;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-light:focus, .btn-outline-light.focus {
-  outline: 0.25rem solid #8193a5;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-outline-dark:focus, .btn-outline-dark.focus {
-  outline: 0.25rem solid black;
-  box-shadow: inset 0 0 0 2px #343a40;
-}
-
-.btn-sm,
-.btn-group-sm > .btn {
-  --bs-btn-border-radius: var(--bs-border-radius);
-}
-
+/**
+ * Subtle buttons.
+ */
 .btn-subtle-primary {
   --bs-btn-font-weight: 700;
   --bs-btn-color: var(--bs-primary-text-emphasis);
@@ -37350,7 +37378,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-primary);
   --bs-btn-focus-shadow-rgb: 15, 108, 191;
 }
-.btn-subtle-primary:focus, .btn-subtle-primary.focus {
+.btn-subtle-primary:focus-visible, .btn-subtle-primary.focus {
   outline: 0.25rem solid #000102;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37365,7 +37393,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-secondary);
   --bs-btn-focus-shadow-rgb: 206, 212, 218;
 }
-.btn-subtle-secondary:focus, .btn-subtle-secondary.focus {
+.btn-subtle-secondary:focus-visible, .btn-subtle-secondary.focus {
   outline: 0.25rem solid #5f6e7d;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37380,7 +37408,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-success);
   --bs-btn-focus-shadow-rgb: 53, 122, 50;
 }
-.btn-subtle-success:focus, .btn-subtle-success.focus {
+.btn-subtle-success:focus-visible, .btn-subtle-success.focus {
   outline: 0.25rem solid black;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37395,7 +37423,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-info);
   --bs-btn-focus-shadow-rgb: 0, 129, 150;
 }
-.btn-subtle-info:focus, .btn-subtle-info.focus {
+.btn-subtle-info:focus-visible, .btn-subtle-info.focus {
   outline: 0.25rem solid black;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37410,7 +37438,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-warning);
   --bs-btn-focus-shadow-rgb: 240, 173, 78;
 }
-.btn-subtle-warning:focus, .btn-subtle-warning.focus {
+.btn-subtle-warning:focus-visible, .btn-subtle-warning.focus {
   outline: 0.25rem solid #694109;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37425,7 +37453,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-danger);
   --bs-btn-focus-shadow-rgb: 202, 49, 32;
 }
-.btn-subtle-danger:focus, .btn-subtle-danger.focus {
+.btn-subtle-danger:focus-visible, .btn-subtle-danger.focus {
   outline: 0.25rem solid #1a0604;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37440,7 +37468,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-light);
   --bs-btn-focus-shadow-rgb: 248, 249, 250;
 }
-.btn-subtle-light:focus, .btn-subtle-light.focus {
+.btn-subtle-light:focus-visible, .btn-subtle-light.focus {
   outline: 0.25rem solid #8193a5;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37455,7 +37483,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-dark);
   --bs-btn-focus-shadow-rgb: 29, 33, 37;
 }
-.btn-subtle-dark:focus, .btn-subtle-dark.focus {
+.btn-subtle-dark:focus-visible, .btn-subtle-dark.focus {
   outline: 0.25rem solid black;
   box-shadow: inset 0 0 0 2px #fff;
 }
@@ -37469,7 +37497,7 @@ p.arrow_button {
   --bs-btn-hover-bg: var(--bs-gray-600);
   --bs-btn-focus-shadow-rgb: 106, 115, 123;
 }
-.btn-subtle-body:focus, .btn-subtle-body.focus {
+.btn-subtle-body:focus-visible, .btn-subtle-body.focus {
   outline: 0.25rem solid #0c0d0d;
   box-shadow: inset 0 0 0 2px #fff;
 }