feat: reduce multiselect selector specificity

src/components/input/multiselect.vue

@@ -9,7 +9,8 @@
 		<div class="control" :class="{'is-loading': loading || localLoading}">
 			<div
 				class="input-wrapper input"
-				:class="{'has-multiple': hasMultiple}">
+				:class="{'has-multiple': hasMultiple}"
+			>
 				<template v-if="Array.isArray(internalValue)">
 					<template v-for="(item, key) in internalValue">
 						<slot name="tag" :item="item">
@@ -38,7 +39,7 @@
 		<transition name="fade">
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
 				<BaseButton
-					class="is-fullwidth"
+					class="search-result-button is-fullwidth"
 					v-for="(data, index) in filteredSearchResults"
 					:key="index"
 					:ref="(el) => setResult(el, index)"
@@ -58,7 +59,7 @@
 
 				<BaseButton
 					v-if="creatableAvailable"
-					class="is-fullwidth"
+					class="search-result-button is-fullwidth"
 					:ref="(el) => setResult(el, filteredSearchResults.length)"
 					@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
 					@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
@@ -434,18 +435,9 @@ function focus() {
 	.control.is-loading::after {
 		top: .75rem;
 	}
+}
 
-	&.has-search-results .input-wrapper {
+.input-wrapper {
-		border-radius: $radius $radius 0 0;
-		border-color: var(--primary) !important;
-		background: var(--white) !important;
-
-		&, &:focus-within {
-			border-bottom-color: var(--grey-200) !important;
-		}
-	}
-
-	.input-wrapper {
 	padding: 0;
 	background: var(--white);
 	border-color: var(--grey-200);
@@ -483,12 +475,23 @@ function focus() {
 		background: var(--white) !important;
 	}
 
+	// doesn't seem to be used. maybe inside the slot?
 	.loader {
 		margin: 0 .5rem;
 	}
-	}
+}
 
-	.search-results {
+.has-search-results .input-wrapper {
+	border-radius: $radius $radius 0 0;
+	border-color: var(--primary) !important;
+	background: var(--white) !important;
+
+	&, &:focus-within {
+		border-bottom-color: var(--grey-200) !important;
+	}
+}
+
+.search-results {
 	background: var(--white);
 	border-radius: 0 0 $radius $radius;
 	border: 1px solid var(--primary);
@@ -500,12 +503,13 @@ function focus() {
 	z-index: 100;
 	max-width: 100%;
 	min-width: 100%;
+}
 
-		&-inline {
+.search-results-inline {
 	position: static;
-		}
+}
 
-		button {
+.search-result-button {
 	background: transparent;
 	text-align: left;
 	box-shadow: none;
@@ -523,21 +527,8 @@ function focus() {
 	align-items: center;
 	overflow: hidden;
 
-			.search-result {
+	&:focus,
-				white-space: nowrap;
+	&:hover {
-				text-overflow: ellipsis;
-				overflow: hidden;
-				padding: .5rem .75rem;
-			}
-
-			.hint-text {
-				font-size: .75rem;
-				color: transparent;
-				transition: color $transition;
-				padding-left: .5rem;
-			}
-
-			&:focus, &:hover {
 		background: var(--grey-100);
 		box-shadow: none !important;
 
@@ -549,7 +540,20 @@ function focus() {
 	&:active {
 		background: var(--grey-200);
 	}
-		}
+}
-	}
+
+.search-result {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding: .5rem .75rem;
+}
+
+
+.hint-text {
+	font-size: .75rem;
+	color: transparent;
+	transition: color $transition;
+	padding-left: .5rem;
 }
 </style>