.multiselect { font-weight: normal; .multiselect__content-wrapper { overflow-x: hidden; } .multiselect__input { background: transparent; padding-left: 0; padding-top: 2px; margin-bottom: 8px; font-size: $font-size-base; } .multiselect__option { padding: 0.5rem; min-height: unset; white-space: normal; font-size: $font-size-base; &::after { line-height: unset; font-size: $font-size-base; height: 100%; display: flex; align-items: center; } } .multiselect__option--highlight { background-color: $brand-primary; color: $white; &::after { background: unset; font-weight: bold; } } .multiselect__option--selected { background: $brand-secondary; color: $brand-primary; &::after { color: darken($brand-secondary, 40%); } &.multiselect__option--highlight { background: darken($brand-secondary, 40%); &::after { background: unset; } } } .multiselect__placeholder { padding-top: 0px; margin-bottom: 7px; } .multiselect__tag { min-height: unset; white-space: normal; word-break: break-all; background: $brand-primary; margin-right: 0.25rem; margin-bottom: 0.1rem; .multiselect__tag-icon { color: $white; &:hover, &:focus { background: $brand-info; } &::after { color: inherit; } } } .multiselect__tags { background: transparent; border: $border-default; min-height: unset; .multiselect__single { background: transparent; color: $text-color; font-size: $font-size-base; overflow: hidden; white-space: normal; word-break: break-all; } } } .multiselect--active { z-index: 1500; // Should be on top of everything }