Themed link focus state

Created by: MartijnCuppens

Fixes #27135 (closed).

This PR includes:

• Themed focus state for linked badges (with transiton like the .btns)
• Selector improvement (a.badge instead of .badge[href]) (See #27219)

Before:

After:

Demo: https://codepen.io/MartijnCuppens/pen/MqKMZv

scss/mixins/_badge.scss

@@ -7,5 +7,11 @@
       color: color-yiq($bg);
       background-color: darken($bg, 10%);
     }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
   }
 }

scss/_badge.scss

@@ -13,6 +13,7 @@
   white-space: nowrap;
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
 
   @at-root a#{&} {
     @include hover-focus {

scss/_variables.scss

@@ -883,6 +883,9 @@ $badge-padding-y:                   .25em !default;
 $badge-padding-x:                   .4em !default;
 $badge-border-radius:               $border-radius !default;
 
+$badge-transition:                  $btn-transition !default;
+$badge-focus-width:                 $input-btn-focus-width !default;
+
 $badge-pill-padding-x:              .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
 // customizing padding or font-size on labels.