Fix vue-select styling

src/nginxconfig/mount.js

@@ -26,6 +26,7 @@ THE SOFTWARE.
 
 // Load in the app
 import './scss/style.scss';
+import 'vue-select/dist/vue-select.css';
 import { createApp } from 'vue';
 import './util/prism_bundle';
 import { getI18n } from './i18n/setup';

src/nginxconfig/scss/_callout.scss

@@ -33,7 +33,7 @@ THE SOFTWARE.
 
   &.floating {
     bottom: 0;
-    box-shadow: inset 0 0 0 $border-size $border-color;
+    box-shadow: inset 0 0 0 $border-size $border;
     max-width: calc(100% - 1rem);
     position: fixed;
     right: 0;

src/nginxconfig/scss/_vue-select.scss

@@ -26,6 +26,11 @@ THE SOFTWARE.
 
 // stylelint-disable selector-class-pattern
 .v-select {
+  --vs-border-color: #{$border};
+  --vs-border-radius: #{$border-radius};
+  --vs-dropdown-box-shadow: 0 2px 4px #{rgba($dark-blue, .06)};
+  --vs-dropdown-option--active-bg: #{$primary}; // stylelint-disable-line custom-property-pattern
+
   &.vs--open {
     > ul {
       opacity: 1;
@@ -100,6 +105,7 @@ THE SOFTWARE.
 
   .vs__dropdown-menu {
     .vs__dropdown-option {
+      padding: .25rem 1.25rem;
       white-space: normal;
     }
   }

src/nginxconfig/scss/style.scss

@@ -38,13 +38,6 @@ $callout: #f3f5f9;
 
   @import "~pretty-checkbox/src/pretty-checkbox";
 
-  $vs-border-color: $border;
-  $vs-border-radius: $border-radius;
-  $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
-  $vs-state-active-bg: $primary;
-
-  @import "~vue-select/src/scss/vue-select";
-
   // Local imports
   @import "header";
   @import "tabs";