.c-multi_select_input {
  border: 1px solid $button;
  background-color: $contrast;

  &:focus {
    box-shadow: 0 0 0 1px $primary, 0 0 0 5px $primaryT;

    &:-moz-placeholder,
    &:-ms-input-placeholder,
    &::-moz-placeholder,
    &::-webkit-input-placeholder {
      color: $disabled;
    }
  }

  &[disabled] {
    background: $excluded;
    border: 1px solid $excluded;
  }
}

.c-multi_select_helper_text__icon_container--error {
  color: $red;
}

.c-multi_select_helper_text__icon_container--unknown {
  color: $primary;
}

.c-multi_select_input--disabled,
.c-multi_select_input__input.c-multi_select_input__input--disabled,
.c-multi_select_input__input--disabled {
  background: $excluded;
}

.c-multi_select_input--focused {
  box-shadow: 0 0 0 1px $primary, 0 0 0 5px $primaryT;

  &:-moz-placeholder,
  &:-ms-input-placeholder,
  &::-moz-placeholder,
  &::-webkit-input-placeholder {
    color: $disabled;
  }
}

.c-multi_select_input__input::placeholder {
  color: $disabled;
}

.c-multi_select_input--invalid {
  border-color: $red;

  &:focus,
  &:focus-within {
    box-shadow: 0 0 0 1px $primary, 0 0 0 5px $primaryT;
  }

  &.c-multi_select_input--focused {
    box-shadow: 0 0 0 1px $primary, 0 0 0 5px $primaryT;
  }
}

input.c-multi_select_input__input {
  background: $contrast;
  color: $fg;
  border: none;

  &::-webkit-input-placeholder,
  &:-moz-placeholder,
  &::-moz-placeholder,
  &:-ms-input-placeholder,
  &::-webkit-input-placeholder,
  &::-moz-placeholder,
  &::-ms-input-placeholder,
  &::placeholder {
    color: $disabled;
  }
}

.c-multi_select_input[data-prefix]:not([data-prefix='']) {
  &:before {
    color: $fg;
  }
}

.c-multi_select_token__remove {
  color: $text;
  border-radius: 25px;

  &:hover {
    color: $selectFg;
    background-color: $accent;
  }
}

.c-token--selected .c-multi_select_token__remove {
  color: $selectFg;

  &:hover {
    color: $primary;
    background-color: $accent;
  }
}

.c-multi_select_input__large_filter_query--edit,
.c-multi_select_input__medium_filter_query--edit {
  border: 1px dashed $accent;
}

.c-multi_select_input__remove_token {
  background-color: $button;
  color: $text;
}

.c-multi_select_input__remove_token:hover {
  background-color: $hl;
  color: $selectFg;
}

.c-multi_select_input .c-token--selected .c-multi_select_input__remove_token {
  background-color: $active;
  color: $text;
}

.c-multi_select_input .c-token--selected .c-multi_select_input__remove_token:hover {
  background-color: $hl;
  color: $selectFg;
}
