fix(markdown): improve visual style of kbd elements

src/components/hotkey/hotkey.scss

@@ -1,3 +1,7 @@
+/**
+* @prop --hotkey-text-transform: Defines the text transformation of the hotkey. Defaults to `uppercase` to render the hotkey that resembles a physical keyboard key.
+*/
+
 @forward '../markdown/partial-styles/_kbd.scss';
 :host(limel-hotkey) {
     display: flex;
@@ -11,6 +15,7 @@
 }
 
 kbd {
+    text-transform: var(--hotkey-text-transform, uppercase);
     margin: 0;
     font-size: 0.75rem;
     box-shadow:
@@ -21,9 +26,6 @@ kbd {
 
 span {
     display: inline-block;
-    &::first-letter {
-        text-transform: uppercase;
-    }
 }
 
 kbd.is-glyph {

src/components/markdown/partial-styles/_kbd.scss

@@ -1,27 +1,30 @@
 @use '../../../style/mixins';
 
 kbd {
+    display: inline-block;
     @include mixins.font-family('monospace');
     font-weight: 600;
     color: rgb(var(--contrast-1100));
-    background-color: rgb(var(--contrast-200));
 
     white-space: pre;
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
     line-height: normal;
 
-    padding: 0.125rem 0.5rem;
-    margin: 0 0.25rem;
-    box-shadow:
-        var(--button-shadow-normal),
-        0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;
-
     border: {
         radius: 0.125rem;
         style: solid;
-        color: rgba(var(--contrast-600), 0.8);
-        width: 0 1px 0.125rem 1px;
+        color: rgb(var(--contrast-500));
+        width: 0 1px 0.1875rem 1px;
     }
+
+    padding: 0.0625rem 0.375rem;
+    margin: 0 0.25rem;
+
+    background-color: rgb(var(--contrast-200));
+    box-shadow:
+        var(--button-shadow-normal),
+        0 0.625rem 0.375rem -0.5rem rgb(var(--color-black), 0.02),
+        0 0.025rem 0.5rem 0 rgb(var(--contrast-100)) inset;
 }