fix(NcSelect): use shared scss mixin to apply new input design changes

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/NcSelect/NcSelect.vue

@@ -325,6 +325,8 @@ export default {
 	<VueSelect
 		class="select"
 		:class="{
+			'select--dark': isDark,
+			'select--legacy': isLegacy,
 			'select--no-wrap': noWrap,
 			'user-select': userSelect,
 		}"
@@ -1013,6 +1015,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../assets/input-border.scss' as border;
+
 body {
 	/**
 	 * Set custom vue-select CSS variables.
@@ -1082,7 +1086,7 @@ body {
 
 .v-select.select {
 	/* Override default vue-select styles */
-	min-height: var(--default-clickable-area);
+	min-height: calc(var(--default-clickable-area) - 2 * var(--border-width-input));
 	min-width: 260px;
 	margin: 0 0 var(--default-grid-baseline);
 
@@ -1127,7 +1131,7 @@ body {
 	.vs__dropdown-toggle {
 		position: relative;
 		max-height: 100px;
-		padding: 0;
+		padding: var(--border-width-input);
 		overflow-y: auto;
 	}
 
@@ -1141,15 +1145,22 @@ body {
 	}
 
 	&.vs--open .vs__dropdown-toggle {
-		border-width: var(--border-width-input-focused);
-		outline: 2px solid var(--color-main-background);
 		border-color: var(--color-main-text);
 		border-bottom-color: transparent;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+		border-style: solid;
+		border-width: var(--border-width-input-focused);
+		outline: 2px solid var(--color-main-background);
+		padding: 0;
 	}
 
-	&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {
-		outline: 2px solid var(--color-main-background);
-		border-color: var(--color-main-text);
+	&:not(.vs--disabled, .vs--open) {
+		.vs__dropdown-toggle:active,
+		.vs__dropdown-toggle:focus-within {
+			outline: 2px solid var(--color-main-background);
+			border-color: var(--color-main-text);
+		}
 	}
 
 	&.vs--disabled {
@@ -1216,6 +1227,10 @@ body {
 	}
 }
 
+.vs__dropdown-toggle {
+	@include border.inputLikeBorder('.select--dark', '.select--legacy', var(--vs-border-color));
+}
+
 .vs__dropdown-menu {
 	border-width: var(--border-width-input-focused) !important;
 	border-color: var(--color-main-text) !important;