Fix border radius calculations.

Author: mportiz08

src/components/Badge.vue

@@ -43,8 +43,6 @@ export default {
 <style lang="scss" scoped>
 @import 'docc-render/styles/_core.scss';
 
-$badge-border-radius: $border-radius - 1px !default;
-
 @mixin badge-variation($color) {
   --badge-color: var(--color-badge-#{$color});
   --badge-dark-color: var(--color-badge-dark-#{$color});
@@ -58,7 +56,7 @@ $badge-border-radius: $border-radius - 1px !default;
   padding: 2px 10px;
   white-space: nowrap;
   background: none;
-  border-radius: var(--badge-border-radius, $badge-border-radius);
+  border-radius: var(--badge-border-radius, calc(#{$border-radius} - 1px));
   border-style: var(--badge-border-style, solid);
   border-width: var(--badge-border-width, 1px);
   margin-left: 10px;

src/components/Filter/FilterInput.vue

@@ -426,7 +426,7 @@ $input-height: rem(28px);
   // Remove Gray Highlight When Tapping Links in Mobile Safari =>
   // https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  border-radius: $small-border-radius + 1;
+  border-radius: calc(#{$small-border-radius} + 1px);
   @include on-keyboard-focus() {
     outline: none;
   }
@@ -484,8 +484,8 @@ $input-height: rem(28px);
     /deep/ ul {
       padding: var(--input-vertical-padding) rem(9px);
       border: 1px solid transparent;
-      border-bottom-left-radius: $small-border-radius - 1;
-      border-bottom-right-radius: $small-border-radius - 1;
+      border-bottom-left-radius: calc(#{$small-border-radius} - 1px);
+      border-bottom-right-radius: calc(#{$small-border-radius} - 1px);
 
       @include on-keyboard-focus() {
         outline: none;