Custom style of vue multiselect component - html

Question

I have added a vue multiselect component... But I want to customize it with css styles. I already have added some css style but can not do everything I want. Like I want to change the option height, select box height, color of selected items/cross button etc. How can I do those things. What are the class names of those elements and how can I modify those things.
<multiselect
v-model="value"
:options="options"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:hide-selected="true"
:option-height="10"
class="min-w-200 w-full mb-2"
open-direction="bottom"
placeholder="--Select One or More--"
:show-labels="false"
label="name"
track-by="name"
:preselect-first="true"
>
<span
slot="selection"
slot-scope="{ values, search, isOpen }"
class="multiselect__single"
v-if="values.length && !isOpen"
>{{ values.length }} options selected</span
>
</multiselect>
I have created this so far.
Here is my css code:
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang="scss" >
.multiselect__tag {
color: rgb(48, 48, 48);
background-color: rgba(var(--vs-primary), 0.3);
font-size: 01rem;
}
.multiselect__tag:hover {
background-color: rgba(var(--vs-warning), 0.3);
}
.multiselect__option--disabled {
background: purple;
color: rgba(var(--vs-primary), 1);
font-style: italic;
}
.multiselect__option--highlight {
background-color: rgba(var(--vs-primary), 1);
color: rgb(255, 255, 255);
font-size: 0.9rem;
height: 1rem;
}
.multiselect__content {
background: rgb(255, 255, 255);
color: #444;
font-size: 0.9rem;
}
.multiselect__single {
height: 0.8rem;
font-size: 01rem;
color: #444;
}
.multiselect__tag {
position: relative;
display: inline-block;
padding: 0.25rem 1.625rem 0.25rem 0.625rem;
margin-right: 0.625rem;
line-height: 1;
margin-bottom: 0.5rem;
}
</style>