ws-input-pills,
.ws-input-pills {
  background: $color-white;
  border: 1px solid $color-border;
  color: $color-black;
  cursor: text;
  display: inline-block;
  min-width: 300px;

  &.has-error {
    border: 1px solid $color-brand-tertiary;
  }

  &:focus-within {
    border: 1px solid $color-brand-secondary;
    outline: 0;
  }

  &__wrapper {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
  }

  &__pill {
    border: 1px solid $color-border;
    border-radius: 15px;
    color: $color-gray-50;
    font-size: $secondary-font-size;
    margin-right: 5px;
    padding: 5px 10px;
  }

  &__pill-dismiss {
    color: lighten($color-gray-50, 10%);
    cursor: pointer;

    &:hover {
      color: darken($color-gray-50, 10%);
    }
  }

  &__input {
    border: 0;
    flex-grow: 1;
    font-size: $base-font-size;
    outline: none;
    padding: 10px 15px 10px 5px;
  }
}
