.chip,
contact-chip {
  background: $solid-grey;
  box-shadow: 2px 2px 4px 0px $shadow inset;
  @include run-transition(all);
  i {
    &::before {
      color: $white !important;
    }
  }
  span {
    color: $white;
  }
}

.chip,
contact-chip,
.chip.selected,
contact-chip.selected {
  &:hover,
  &:active {
    box-shadow: 2px 2px 4px 0px $shadow-dark inset;
  }
}

.chip.multiselect {
  background: $accent;
  box-shadow: 2px 2px 3px 0px $shadow;
  &:active {
    box-shadow: 2px 2px 4px 0px $shadow-dark inset;
  }
}
.chip.type {
  margin: 3px !important;
  &.parent {
    background-color: $cyan;
  }
  &.teacher {
    background-color: $green;
  }
  &.student {
    background-color: $orange;
  }
  &.staff {
    background-color: $purple;
  }
  &.guest {
    background-color: $pink;
  }
}

/// REMOVABLES

.chip,
contact-chip {
  &.removable {
    box-shadow: none;
  }
}

.chip.text {
  background: $white;
  box-shadow: none;
  text-shadow: none;
}

.chip-valide {
  border: 1px solid $green;
  span {
    color: $green;
  }
}
.chip-error {
  border: 1px solid $red;
  span {
    color: $red;
  }
}

.chip-warning {
  border: 1px solid $yellow;
  span {
    color: $yellow;
  }
}

.chip-default {
  border: 1px solid $grey;
  span {
    color: $grey;
  }
}

.chip-hide {
  border: 1px solid $white;
  span {
    color: $black;
  }
}