multiselect.component.scss

$color-border: #adadad;
$color-selected: #d2d2d2;
$color-selected-background: #fcfcfc;

$spacing-extra-small: 4px;
$spacing-small: 8px;
$spacing-large: 12px;
$border-radius: 3px;

:host {
  width: 100%;
  display: flex;
}

.multiselect {
  width: 100%;
  position: relative;

  .input {
    border: 1px solid $color-border;
    padding: $spacing-extra-small;
    cursor: pointer;
    border-radius: $border-radius;
    min-height: 30px;

    .selected-item {
      padding: 0 $spacing-extra-small;
      border: 1px solid $color-border;
      border-radius: $border-radius;
      margin: $spacing-extra-small;
      display: inline-block;
    }
  }
}

.dropdown-list {
  position: absolute;
  width: 100%;
  margin-top: $spacing-small;
  z-index: 9999;
  border-color: white;
  border-radius: $border-radius;
  box-shadow: 0 1px 5px 0 #959595;

  ul {
    max-height: 250px;
    padding: 0;
    list-style: none;
    overflow: auto;
    margin: 0;
  }

  li {
    padding: $spacing-small;
    margin: $spacing-small;
    cursor: pointer;

    &.selected {
      color: $color-selected;
      background-color: $color-selected-background;
    }
  }
}