improvement(feature info pill): Styling

- Improved CSS/HTML and appearance of Feature Info Pill

themes/hugo-docs/assets/elements/feature-info.scss

@@ -1,32 +1,46 @@
 .feature-info {
-  margin-top: 2em;
-  margin-bottom: -1em;
+  margin-top: $space-m;
+  margin-bottom: $space-m;
 }
 
 .feature-info-pill {
   display: inline-block;
-  border-radius: 5px;
+  border-radius: $rounded-corners;
 
   @extend %font-s-xs;
   background-color: $color-cyan-2;
 }
 
-.feature-info-pill-header {
+.feature-info-pill__header {
+  position: relative;
   display: inline-block;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+  border-top-left-radius: $rounded-corners;
+  border-bottom-left-radius: $rounded-corners;
   text-transform: capitalize;
-  padding: 1px 10px;
-  padding-right: 5px;
-  color: rgba(0, 0, 0, 0.8);
-  background-color: rgba(0, 0, 0, 0.1);
+  padding: $space-xs $space-s;
+  color: $color-white;
+  background-color: $color-cyan-1;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    border: $space-xs solid transparent;
+    border-left: $space-xs solid $color-cyan-1;
+    box-sizing: content-box;
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+  }
 }
 
-.feature-info-pill-content {
+.feature-info-pill__content {
   display: inline-block;
-  padding: 1px 10px;
+  padding: $space-xs $space-s;
 }
 
-.feature-info-pill-header + .feature-info-pill-content {
-  padding-left: 5px;
+.feature-info-pill__header + .feature-info-pill__content {
+  padding-left: $space-s;
 }

themes/hugo-docs/layouts/shortcodes/feature-info.html

@@ -2,7 +2,7 @@
 {{- $repo := .Get 1 -}}
 <div class="feature-info">
   <div class="feature-info-pill">
-    {{ if $repo }}<span class="feature-info-pill-header">{{ $repo }}</span>{{ end }}
-    <span class="feature-info-pill-content">{{ $description }}</span>
+    {{ if $repo }}<span class="feature-info-pill__header">{{ $repo }}</span>{{ end }}
+    <span class="feature-info-pill__content">{{ $description }}</span>
   </div>
 </div>